微信小程序保存图片到相册(授权)

前两天在做小程序项目的时候，碰到两个点。1.将答题获得的分数占比绘制成canvas图表(暂不做说明)。2.将最终出来的截图图通过一键按钮保存到相册。总体来说这两个点都不算难度。然而还是让出现了插曲，原因在于绘制图表成功后，保存图片时，性能消耗很高，页面卡死。由于第一次弄，由公司老大哥推荐wxdraw.min.js，最后通过检测，发现正是使用wxdraw.min.js将图绘制到canvas上时造成的。(我觉得更大的可能性是由于场景的适用性造成的，或许是我用法不对)，于是还是去官方文档看了下将图片绘制到Canvas上的API，秒解。

1.将图片绘制到canvas上 微信官方相关接口

/**
 *  result 表示canvas的ID
 *  imgSrc1和imgSrc2表示图片的src
 *  后面的四个数字表示坐标轴(x,y)以及长宽度
 */
let ctx= wx.createCanvasContext('result')

ctx.drawImage(imgSrc1, 0, 0, 100, 200)
ctx.drawImage(imgSrc2, 0, 0, 100, 200)

ctx.draw();

2. 将绘制后的canvas保存为图片 微信官方相关接口

canvasToPath () {
  return new Promise((resolve, reject) {
    let self = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 750,
      height: 1218,
      destWidth: 750,
      destHeight: 1218,
      canvasId: 'result',
      success: function (res) {
        resolve(res.tempFilePath)
      }
    })
  })
}

3.将图片保存到相册

在保存图片到相册的时候，是需要授权的，这个时候 需要先检测下是否授权，没有则进行授权验证，通过后则执行保存办法。如果拒绝授权，则默认开启手机设置，进行授权。

// js文件
// 保存图片方法
saveImage (filePath) {
  wx.saveImageToPhotosAlbum({
    filePath: filePath,  // 此为图片路径
    success: (res) => {
      console.log(res)
      this.showToast('保存成功')
    },
    fail: (err) => {
      console.log(err)
      this.showToast('保存失败，请稍后重试')
    }
  })
}

// 微信提示方法
showToast (title) {
  wx.showToast({
    title: title
  });
}

// 点击保存图片到相册(授权)
saveImageToPhotos (filePath) {
  let self = this
  // 相册授权
  wx.getSetting({
    success(res) {
      // 进行授权检测，未授权则进行弹层授权
      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success () {
            self.saveImage(filePath)
          },
          // 拒绝授权时，则进入手机设置页面，可进行授权设置
          fail() {
            wx.openSetting({
              success: function (data) {
                console.log("openSetting success");
              },
              fail: function (data) {
                console.log("openSetting fail");
              }
            });
          }
        })
      } else {
        // 已授权则直接进行保存图片
        self.saveImage(filePath)
      }
    },
    fail(res) {
      console.log(res);
    }
  })
}
// 按钮点击触发
clickSave () {
  this.canvasToPath().then((res) => {
    this.saveImageToPhotos(res)
  })
}