小程序图片合成

xml文件

js文件

combineImage: function () {

    let that = this;
    let p1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: that.data.completePicPath,
        success(res) {
          resolve(res);
        }
      })
    }).then(res => {
      const ctx = wx.createCanvasContext('shareCanvas');
      ctx.drawImage(res.path, 0, 0, 305, 406);    //绘制背景图
      //ctx.setTextAlign('center')    // 文字居中
      ctx.setFillStyle('#000000')  // 文字颜色：黑色
      ctx.setFontSize(20)         // 文字字号：22px
      ctx.fillText("文本内容", 20, 70) //开始绘制文本的 x/y 坐标位置（相对于画布） 
      ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
      ctx.draw(false, that.drawPicture());//draw()的回调函数 
      console.log(res.path);
    })
    
  },

  drawPicture: function () { //生成图片
    var that = this;
    setTimeout(function () {
      wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
        x: 0,
        y: 0,
        width: 610,
        height: 812,
        destWidth: 610,  //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
        destHeight: 812,
        canvasId: 'shareCanvas',
        success: function (res) {
          console.log('++++++++++++++', res);
        },
      })
    }, 300)
  }