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

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