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

wxml页面:canvas canvas-idmyCanvas type2d idmyCanvas styleposition: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); } }) } }) } } }) }