Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use js+canvas to achieve the merger of two pictures into a picture", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use js+canvas to merge two pictures into one picture" this article.

Use js to merge two pictures into one picture

The Synthesis of JS and canvas

FunctiondrawAndShareImage () {

Varcanvas=document.createElement ("canvas")

Canvas.width=700

Canvas.height=700

Varcontext=canvas.getContext ("2d")

Context.rect (0century 0canvas.widthdepartment canvas.height)

Context.fillStyle= "# fff"

Context.fill ()

VarmyImage=newImage ()

MyImage.src= ". / 2.png"; / / background picture your own local picture or online picture

MyImage.crossOrigin='Anonymous'

Two pictures are merged into one code

MyImage.onload=function () {

Context.drawImage (myImage,0,0700700)

Context.font= "60pxCourierNew"

Context.fillText (I am the text, 350450)

VarmyImage2=newImage ()

MyImage2.src= ". / 1.png"; / / your own local picture or online picture

MyImage2.crossOrigin='Anonymous'

MyImage2.onload=function () {

Context.drawImage (myImage2175175225225)

Varbase64=canvas.toDataURL ("image/png"); / / "image/png" pay attention here

Varimg=document.getElementById ('avatar')

/ / document.getElementById ('avatar') .src=base64

Img.setAttribute ('src',base64)

}

}

}

The above is all the contents of the article "how to use js+canvas to merge two pictures into one picture". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.