最近有個專案是儲存為名片（圖片），讓使用者傳送給朋友或朋友圈，找了很多方案都不適用，絞盡腦汁之後還是選了使用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()
                  }
                })
              }
            })
          })
        }
      }
    })
  },

　3，接下來是，，，emmmm~~沒了（皮一下，很開心）