How to use js+canvas to merge two pictures into one picture
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!
