前两天在做小程序项目的时候，碰到两个点。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)
 })}

来源：https://www.jianshu.com/p/ecfef42dadd4