微信小程序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绘制图片并保存到本地的问题。