微信小程序 canvas 分享图片 生成图片

onShow() {
    var that =this
       //2. canvas绘制文字和图片
      const ctx = wx.createCanvasContext('myCanvas');
      var imgPath = '../../image/1.png'
      var bgImgPath = '../../image/zny.png';
      var userImgPath = '../../image/zny.png';
      ctx.drawImage(imgPath, 0, 0, 320, 500);
      ctx.setFillStyle('white')
      ctx.fillRect(0, 0, 0, 0);
      ctx.drawImage(bgImgPath,  35, 403, 60, 60);
      ctx.drawImage(userImgPath,  30, 35, 70, 70);
      ctx.drawImage(imgPath,    410, 610, 160, 160);

      ctx.setFontSize(14)
      ctx.setFillStyle('#000')
      ctx.fillText('妖妖灵', 100, 60)

      ctx.setFontSize(16)
      ctx.setFillStyle('#999999')
      ctx.fillText('已坚持 100 天', 110, 199)
      
      ctx.setFontSize(16)
      ctx.setFillStyle('#3366FF')
      ctx.fillText('100', 214, 258)
      ctx.fillText('第 10000 名', 174, 283)

      // ctx.setFontSize(24)
      // ctx.fillText('长按扫码查看详情', 30, 770)
      ctx.draw()
  },

上面 处理图片 向图片增加 需求 的 数据文字 以及图片等

下一步 将canvas生成图片

wx.canvasToTempFilePath({ //将canvas生成图片
      canvasId: 'myCanvas',
      x: 0,
      y: 0,
      width: 320,
      height: 500,
      success: function (res) {
        let urls = res.tempFilePath //图片临时路径
        // let urls = '../../image/guide.jpg' //图片临时路径
        wx.showShareImageMenu({ //分享给朋友
          path: urls,
          success: (res) => {
            console.log("分享成功：", res);
          },
          fail: (err) => {
            console.log("分享失败：", err);
            wx.showToast({
              title: "分享失败",
              duration: 2000
            })
          },
        })
      }
    }, this)
  },