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);
        }
      });
    }

小程序生成分享圖——總結