小程序生成分享图——总结

H5的生成分享图，通常使用的都是html2canvas，因此在小程序里遇到这个需求，第一反应也是它，因此一气呵成把分享图的样式都写完了，BUT，，，白写了

小程序不是HTML而是WXML，因此要使用html2canvas就须要用webview，内嵌H5页面

接下来就是小程序canvas踩坑集了

网络图片不能直接绘制，须要先使用wx.getImageInfo 和 wx.downloadFile 获取图片

官网提供的片断：

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success(res) {
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

图片适配，绘制的图片可能须要裁剪缩放，drawImage()的详解看这里：https://blog.csdn.net/vivian_jay/article/details/68933161

图片真机绘制不出来，看一眼，是否是打开调试就出来了，有多是图片的网络地址没有配置为合法地址，解决办法：https://segmentfault.com/q/1010000010231945

文字折行显示，这个没有捷径，只能本身处理，连接：https://blog.csdn.net/weixin_41941325/article/details/80274969?utm_source=copy

绘制框在小米手机显示不全，多是我把canvas放大了两倍的缘由，ctx.strokeRect()在小米手机一直绘制不了完整的矩形，只能用图片替代了

生成图片不清晰，canvas和图片都放大两倍绘制，同时会出现另外一个问题，canvas要隐藏掉（找了不少种办法解决不了以下），显示图片

隐藏canvas，不能使用canvas的自带属性，会绘制不出图，在网上搜的别的方法：

保存图片受权，第一次拒绝受权后，再次点击须要提示打开受权

    saveImg() {
      wepy.authorize({
        scope: 'scope.writePhotosAlbum',
        success: res => {
          wx.saveImageToPhotosAlbum({
            filePath: this.shareImgPath,
            success() {
              showToast('保存成功');
            },
            fail() {
              showToast('保存失败，请重试');
            }
          });
        },
        fail: () => {
          showToast('保存失败，请重试');
          setTimeout(() => {
            wepy.showModal({
              title: '提示',
              content: '您取消了保存图片受权，是否从新受权',
              showCancel: true,
              cancelText: '取消',
              cancelColor: '#000000',
              confirmText: '肯定',
              confirmColor: '#3CC51F',
              success: res => {
                if (res.confirm) {
                  wepy.openSetting({ success: res => {} });
                }
              }
            });
          }, 500);
        }
      });
    }