微信小程序实现两张图片合二为一

wxml页面:

<canvas canvas-id="myCanvas" type="2d" id="myCanvas"
	style="position:fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 290px;height:390px;box-sizing:border-box;" />

js部分:

	
that.frame(下层图片,上层图片); //必须使用png图片
frame(back,pic){
		const that = this;
		const eventChannel = that.getOpenerEventChannel()
		wx.createSelectorQuery().select("#myCanvas").fields({
			node: true,
			size: true
		}).exec(res => {
			const canvas = res[0].node; //获取返回节点
			const ctx = canvas.getContext('2d');
			canvas.width = 290; //设置宽高
			canvas.height = 390; 
			const backImg = canvas.createImage(); //创建图片模板
			backImg.src = back; //设置图片路径,背景图
			backImg.onload = () => {
                //设置完毕之后,在设置上一层的图片
				const Img = canvas.createImage();
				Img.src = pic;
				Img.onload = () => {
					ctx.drawImage(Img, 0, 0, 290, 390);
					ctx.drawImage(backImg, 0, 0, 290, 390);
                   
					wx.canvasToTempFilePath({ //api画板转化为图片
						canvas: canvas, 
						success: ress => {
                            //ress就是合二为一之后的图片
							wx.uploadFile({
								url: 图片上传地址,
								filePath: ress.tempFilePath,
								header: {
									imageType: false
								},
								name: 'file',
								success(resss) {
                                    //后端图片上传接口返回值
                                    console.log(resss);

								}
							})
							
						}
					})
				}
			}
		})
	}