篇文章主要介绍了js+canvas实现两张图片合并成一张图片的方法,结合实例形式分析了JavaScript结合HTML5canvas实现图片合并的操作技巧。
用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);
}
}
}
总之，两张图片合成一张给大家简单的介绍了一些，希望大家多看看。