如何使用js+canvas实现两张图片合并成一张图片-创新互联

这篇文章主要为大家展示了“如何使用js+canvas实现两张图片合并成一张图片”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用js+canvas实现两张图片合并成一张图片”这篇文章吧。

用js两张图片合并成一张图片

JS和canvas的合成方式

functiondrawAndShareImage(){

varcanvas=document.createElement("canvas");

canvas.width=700;

canvas.height=700;

varcontext=canvas.getContext("2d");

context.rect(0,0,canvas.width,canvas.height);

context.fillStyle="#fff";

context.fill();

varmyImage=newImage();

myImage.src="./2.png";//背景图片你自己本地的图片或者在线图片

myImage.crossOrigin='Anonymous';

两张图片合并成一张代码

myImage.onload=function(){

context.drawImage(myImage,0,0,700,700);

context.font="60pxCourierNew";

context.fillText("我是文字",350,450);

varmyImage2=newImage();

myImage2.src="./1.png";//你自己本地的图片或者在线图片

myImage2.crossOrigin='Anonymous';

myImage2.onload=function(){

context.drawImage(myImage2,175,175,225,225);

varbase64=canvas.toDataURL("image/png");//"image/png"这里注意一下

varimg=document.getElementById('avatar');

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

img.setAttribute('src',base64);

}

}

}

以上是“如何使用js+canvas实现两张图片合并成一张图片”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！