關於微信小程序使用canvas生成圖片，內容圖片跨域的問題

最近有個項目是保存為名片（圖片），讓用戶發送給朋友或朋友圈，找了很多方案都不適用，絞盡腦汁之后還是選了使用canvas，但是用這玩意兒生成圖片最大的缺點就是，如果你的內容中有圖片，並且這個圖片是通過外鏈鏈接進來的，那么很容易造成跨域而無法生成圖片的問題，以下就是我解決該問題的辦法：

*提前說一句，在做這個功能的時候，我發現跨域的問題沒法解決，唯一能做的就是把圖片放到和canvas相同的域里

1，以下是微信小程序的wxml文件部分

<canvas canvas-id='share' width="200" height="200" style="width:200px;height:200px;"></canvas>
<button bindtap='save2img'>保存圖片</button>

2，以下是微信小程序的js部分代碼

save2img: function() {
    wx.showLoading({
      title: '圖片保存中...',
    })
    let image = 'http://www.baidu.com/source.jpg';//圖片地址
    let filePath = '';
    wx.downloadFile({//將圖片保存為本地臨時文件
      url: image,
      success(res) {
        // 只要服務器有響應數據，就會把響應內容寫入文件並進入 success 回調，業務需要自行判斷是否下載到了想要的內容
        if (res.statusCode === 200) {
          const ctx = wx.createCanvasContext('share')//創建畫布
          ctx.drawImage(res.tempFilePath, 0, 0, 200, 200)//將臨時文件渲染到畫布上
          ctx.restore()
          ctx.save()
          ctx.draw(false, () => {
            // 生成圖片
            wx.canvasToTempFilePath({
              canvasId: 'share',
              success: res => {
                //畫板路徑保存成功后，調用方法吧圖片保存到用戶相冊
                wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  //保存成功失敗之后，都要隱藏畫板，否則影響界面顯示。
                  success: (res) => {
                    console.log(res)
                    wx.hideLoading()
                  },
                  fail: (err) => {
                    console.log(err)
                    wx.hideLoading()
                  }
                })
              }
            })
          })
        }
      }
    })
  },