【WeChat】Canvas绘制分享朋友圈

版权声明：听说这里是写版权的，那转载就请注明下吧 https://blog.csdn.net/qq_32688731/article/details/81841335

似乎WeChat目前也还没有提供小程序直接分享到朋友圈的API接口。

如果想要分享到朋友圈只能间接的通过图片，识别二维码的方式，有点繁琐。

效果图：

share.wxml 代码：

<!-- canvas绘制分享图 -->
<view class='body'>
  <canvas canvas-id="myCanvas" class='canvas-box'></canvas>
  <button bindtap="ShowCanvas">Show</button>
</view>

share.wxss 代码：

.canvas-box {
  width: 620rpx;
  height: 990rpx;
  margin: 0 auto;
  border-radius: 20rpx;
}

.body {
  background-color: rgba(0, 0, 0, 0.5);
}

share.js 代码：

// pages/share/share.js
Page({
  data: {
    avatarUrl: 'http://120.77.181.53/img/avatarUrl.jpg',
    qrcode: 'http://120.77.181.53/img/qrcode.png',
    qrcode_temp: null,
    windowWidth: 0,
    scale: 1.38,
  },
  onLoad: function (options) {
    this.setData({
      windowWidth: wx.getSystemInfoSync().windowWidth * 0.825
    })
    var that = this;
    wx.downloadFile({
      url: that.data.avatarUrl,
      success: function (res1) {
        //缓存头像图片
        that.setData({
          portrait_temp: res1.tempFilePath
        })
        //缓存canvas绘制小程序二维码
        wx.downloadFile({
          url: that.data.qrcode,
          success: function (res2) {
            console.log('二维码：' + res2.tempFilePath)
            //缓存二维码
            that.setData({
              qrcode_temp: res2.tempFilePath
            })
            console.log('开始绘制图片');
            that.drawImage();
          }
        })
      }
    })
  },
  canvasToImage: function () {
    var that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.windowWidth,
      height: that.data.windowWidth * that.data.scale,
      destWidth: that.data.windowWidth * 4,
      destHeight: that.data.windowWidth * 4 * that.data.scale,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log('朋友圈分享图生成成功:' + res.tempFilePath)
        wx.previewImage({
          current: res.tempFilePath, // 当前显示图片的http链接
          urls: [res.tempFilePath] // 需要预览的图片http链接列表
        })
      },
      fail: function (err) {
        console.log('失败')
        console.log(err)
      }
    })
  },
  drawImage: function () {
    //绘制canvas图片
    var that = this
    const ctx = wx.createCanvasContext('myCanvas')
    var bgPath = '../../img/card_bg.jpg'
    var portraitPath = that.data.portrait_temp
    var hostNickname = 'Guan Xing'

    var qrPath = that.data.qrcode_temp
    var windowWidth = that.data.windowWidth
    that.setData({
      scale: 1.6
    })
    //绘制背景图片
    ctx.drawImage(bgPath, 0, 0, windowWidth, that.data.scale * windowWidth)

    //绘制头像
    ctx.save();
    ctx.beginPath();
    ctx.arc(windowWidth / 2, 0.32 * windowWidth, 0.15 * windowWidth, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(portraitPath, 0.7 * windowWidth / 2, 0.17 * windowWidth, 0.3 * windowWidth, 0.3 * windowWidth);
    ctx.restore();
    //绘制第一段文本
    ctx.setFillStyle('#000');
    ctx.setFontSize(0.037 * windowWidth);
    ctx.setTextAlign('center');
    ctx.fillText(hostNickname + ' 正在参加疯狂红包活动', windowWidth / 2, 0.70 * windowWidth);
    //绘制第二段文本
    ctx.setFillStyle('#000');
    ctx.setFontSize(0.037 * windowWidth);
    ctx.setTextAlign('center');
    ctx.fillText('邀请你一起来领券抢红包啦~', windowWidth / 2, 0.76 * windowWidth);
    //绘制二维码
    ctx.drawImage(qrPath, 0.64 * windowWidth / 2, 0.90 * windowWidth, 0.36 * windowWidth, 0.36 * windowWidth);
    //绘制第三段文本
    ctx.setFillStyle('#000');
    ctx.setFontSize(0.037 * windowWidth);
    ctx.setTextAlign('center');
    ctx.fillText('长按二维码保存至手机', windowWidth / 2, 1.42 * windowWidth);

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#070616";
    ctx.strokeRect(0, 0, windowWidth, that.data.scale * windowWidth);
    ctx.draw();
  },
  ShowCanvas: function (event) {
    wx.hideLoading();
    this.canvasToImage();
  },
})