使用canvas在前端实现图片合成

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sun124608666/article/details/85333467

参数	描述
img	用来被绘制的图像、画布或视频。
sx	可选。img被绘制区域的起始左上x坐标。
sy	可选。img被绘制区域的起始左上y坐标。
swidth	可选。img被绘制区域的宽度（如果没有后面的width或height参数，则可以伸展或缩小图像）。
sheight	可选。img被绘制区域的高度（如果没有后面的width或height参数，则可以伸展或缩小图像）。
x	画布上放置img的起始x坐标。
y	画布上放置img的起始y坐标。
width	可选。画布上放置img提供的宽度（可能会有图片剪裁效果）。
height	可选。画布上放置img提供的高度（可能会有图片剪裁效果）。

写法：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
详解：
context.drawImage(canvas对象,移动中心_x,移动中心_y,截取原图片多宽的区域作为显示,截取原图片多高的区域作为显示,x坐标,y坐标,图片宽度（溢出隐藏）,图片高度（溢出隐藏）);

实例：

//海报背景（已存在的图片）
var eleImgCover = document.getElementById('imgCover');
//上传图片（已通过方法获取到 document.getElementById("imgUpload").src = window.URL.createObjectURL(imgFile.files[0]);）
var imgUpload = document.getElementById('imgUpload');
//创建画布
var canvas = document.createElement('canvas');
//高宽设置
var upload_width = 514;
var upload_height = 528;
var cover_width = 692;
var cover_height = 1142;
canvas.width = cover_width;
canvas.height = cover_height;
var context = canvas.getContext('2d');
//上传图像绘制
context.drawImage(imgUpload, 0, 0, upload_width, upload_height, 92,302, upload_width, upload_height);
//底板图绘制
context.drawImage(eleImgCover, 0, 0, cover_width, cover_height, 0,0, cover_width, cover_height);
//给要存放此图片的img标签赋值
$(".down_poster").attr("src",canvas.toDataURL('image/png'));