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

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); } }) } }) } } }) }