因为微信小程序只能分享给好友，所以想在朋友圈传播，只能通过生成一张带二维码的图片，用户主动将图片分享到朋友圈实现。

需求：

生成一张带用户头像和小程序码拼合在一起的的图片。

坑点：

1. 官方提供的小程序码的4个接口中，小程序二维码文档，只有b接口生成数量不受限，但是可传参数长度最大32字符。
2. 需求中用户头像需覆盖二维码，在绘制分享图片前，要先生成圆形的用户头像。
3. canvas不能被隐藏，否则会生成空图片。
4. 绘制canvas后不能马上转为图片，否则有一定概率生成未绘制完成的图片。
5. 部分机型上图片过大会默认展示压缩图，微信无法识别压缩图上的二维码。
6. canvas上的文字超出一行无法自动换行，且微信提供的测量文案长度的api有最低版本要求，所以要求文案尽量简略。
7. canvas的drawImage方法无法绘制网络图片，需先行通过downloadFile下载到本地再绘制到canvas。

实现流程:

• 下载小程序码 和 绘制圆形用户头像
• 绘制分享图
• 将canvas转换成图片并展示。

wxml部分代码：

<canvas class="canvas-qrcode" canvas-id="qrcode" />

css部分:

• canvas的宽高、位置要根据具体实现的图片样式而异。
• 要通过定位的方式隐藏canvas，而不能display: none;，否则生成的图片会是空白的。

.canvas-qrcode {
  position: absolute;
  top: -800px;
  left: 0;
  width: 750px;
  height: 750px;
}

js部分

// 点击生成图片按钮
handleQrcodeTap() {
  Promise
    .all([this.drawAvatar(), this.requestQrcode()])
    .then(this.drawCanvas)
    .catch(() => {
      // 失败提示
  });
}
// 生成圆形头像
drawAvatar() {
  return new Promise(function (resolve, reject) {
    wx.downloadFile({
      url: 用户头像url,
      success: (res) => {
        if (res.statusCode === 200 && res.errMsg === 'downloadFile:ok' && res.tempFilePath && !res.tempFilePath.match(/\.html?$/i)) {
          // 通过剪裁实现圆形头像，save -> clip -> restore不能省略
          const ctx = wx.createCanvasContext('qrcode');
          ctx.save();
          ctx.arc(50, 50, 50, 0, 2 * Math.PI);
          ctx.clip();
          ctx.drawImage(res.tempFilePath, 0, 0, 100, 100);
          ctx.restore();
          ctx.draw(false, function() {
            setTimeout(function () {
              wx.canvasToTempFilePath({
                canvasId: 'qrcode',
                x: 0,
                y: 0,
                width: 100,
                height: 100,
                success(res) {
                  resolve(res.tempFilePath);
                },
                fail() {
                  reject();
                },
              });
            }, 300);
          });
        } else {
          reject();
        }
      },
      fail() {
        reject();
      },
    });
  })
}
// 获取小程序码
requestQrcode() {
  return new Promise(function (resolve, reject) {
    wx.downloadFile({
      url: 二维码图片,
      success(res) {
        if (res.statusCode === 200 && res.errMsg === 'downloadFile:ok' && res.tempFilePath && !res.tempFilePath.match(/\.html?$/i)) {
          resolve(res.tempFilePath);
        } else {
          reject();
        }
      },
      fail() {
        reject();
      },
    });
  })
 }
// 绘制分享图
drawCanvas() {
  ctx.draw(false, function() {
    // 延迟生成图片
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        width: 750,
        height: 750,
        quality: 0.9, // 生成jpg格式并调低质量
        fileType: 'jpg',
        success:(res) {
          wx.previewImage({
            urls: [res.tempFilePath],
          });
        },
        fail() {
          wx.hideLoading();
        },
      });
    }, 300);
  });
}

待优化部分

每一步生成图片的临时地址都可以缓存下来，这样在当前页面再绘制分享图的时候就不需要重新绘制、重新下载，可以大大节省二次绘制的时间，我们在项目里也是这样做的。因为这只是demo，为了减少代码量，去掉了优化缓存部分。