微信小程序canvas保存繪製圖片

上篇文章大概寫了一下canvas繪製圖片的問題，那麼接下來記錄一下canvas保存圖片的問題~

wx.canvasToTempFilePath()
//把當前畫布指定區域的內容導出生成指定大小的圖片

那麼我們首先來了解一下這個api的參數們：

除了起始位置及繪製圖片的大小，那麼需要注意的我已經標記出來了，其中很多其實也不能設置直接用默認值即可。
其中api的成功的回調中會返回生成文件的臨時路徑，那麼我們拿到臨時路徑進行保存圖片到本地就行了。

wx.saveImageToPhotosAlbum()
//保存圖片到系統相冊。

保存圖片到系統相冊的api參數：

這個地方需要注意的是要保存的filePath，圖片文件路徑，可以是臨時文件路徑或永久文件路徑，不支持網絡圖片路徑。

那麼由canvas產生要保存的臨時路徑，然後用保存圖片到系統的api進行保存即可，代碼如下：

  canvasSave(){
    let that = this;
    //注意這個地方因爲我繪製的大小就是我要保存的區域，所以我直接用了默認的橫縱座標和畫布區域
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success(res) {
        console.log(res.tempFilePath);
        saveImg(res)
      },
      fail: function() {
        console.log('fail-downloadFile')
      }
    })
    let saveImg = function(resourse) {
      console.log("保存圖片：",resourse);
      wx.saveImageToPhotosAlbum({
        filePath: resourse.tempFilePath,
        success: function(res) {
          console.log(res)
          applyApi.toast('保存成功！')
        },
        fail: function(res) {
          console.log(res)
        }
      })
    }
  }

這樣就解決了用canvas繪製圖片並保存到本地的問題。