1.需求：一个需求，实现两张图片合并，并生成一张图片显示到页面上
2.实现思路：使用canvas来先后加入两张图片到画布中，在利用canvas的属性来生成合并后的url，加载到src中去；
3.效果
4.代码实现：
// 1.创建canvas画布
let canvas = document.createElement('canvas');
//2.设置画布宽高
canvas.width=400;
canvas.height=400;
// 3.新建一个画布为2d的上下文
let cv = canvas.getcontext('2d');
// 4.把第一张图片放到画布中
let img1 = new Image();
// 5.设置第一张图片路径
img1.src = new URL('图片路径',import.meta.url).href;//vue3+vite写法，vue2+webpack可以用require（）
//6.将第一张图片绘制到canvas
img1.onload = function (){
cv.drawImage(img1,0,0,400,400);
}
// 7.同样加载第二张图片，注意，此时第二张图片在第一张图片上边，重复4.5.6
let img2 = new Image();
img2.src = new URL('图片2路径',import.meta.url).href;
//8.看下两个图片位置
let Img1Position = document.getElementById('第一张图片dom').getBoundingClientRect();
let Img2Position = document.getElementById('第二张图片dom').getBoundingClientRect();
//9.看下此时第2个图片相对于第一张图片的距离
let img2ToOneLeft = Img2Position.left- Img1Position.left;
let img2ToOneTop = Img2Position.top- Img1Position.top;
img2.onload = function (){
//10.设置合成模式，我这里是乘法，大家可根据需求设置成合适的 globalCompositeOperation属性参考
cv.globalCompositeOperation= 'multiply';
cv.drawImage(img2,img2ToOneLeft,img2ToOneTop,300,300);
}
// 11.生成图片url
canvas.toDataURL()
// 12.放到img标签的src中即可
