小程序保存图片到相册

首先我保存图片的目的是有一个分享功能，分享可以分享一张图片，图片保存到相册里

（打马赛克是希望不要有什么麻烦）
做出来的效果大概就是这样的，有一张背景图，左上角的头像和昵称是小程序的用户信息，还需要画上连续打卡几天（那一行蓝色的字）还有就是小程序码，去做你害怕的事害怕便会自然消失，这句话也是后期写上去的

首先贴上HTML

<view bindlongtap="saveImageToPhotosAlbum">
    <canvas style="width:{{canvasWidth}};height:{{canvasHeight}}px;" canvas-id="shareCanvas" wx:if="{{is_show_canvas}}"></canvas>
    <image src='{{shareImgPath}}' wx:if="{{is_show}}"></image>
</view>

canvas 标签是需要画图的容器，但是canvas有个问题就是在显示图片的时候会有一点模糊，所以把canvas隐藏显示图片会更加清晰也更容易做一些css样式

在onload里获取用户信息，头像和昵称，然后获取接口里取出来的分享信息，打卡天数什么的，最后画图。
onLoad: function(options) {
	this.getUserInfo().then(() => {
	   this.getShareInfoObj().then(res => {
	     this.handleSaveImg()     //  画图的方法
	   })
	 })
 },
 取分享信息和处理图片，图片在取到的时候是不能直接画在图上的，必须要保存到本地然后再去画图
 getShareInfoObj() {
    return new Promise((resolve, reject) => {
      let that = this;
      getShareInfo().then(res => {
        this.setData({
          continue_share_count: res.continue_share_count,
        })
        wx.downloadFile({
          url: res.qr_code,    // 先把小程序码保存到本地
          success: function(qr_res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (qr_res.statusCode === 200) {
              that.setData({
                qr_code: qr_res.tempFilePath
              })
              wx.downloadFile({
                url: that.data.avatarUrl,    //  这个是头像保存到本地
                success: function(avatar_res) {
                  // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                  if (avatar_res.statusCode === 200) {
                    that.setData({
                      avatarUrl: avatar_res.tempFilePath
                    })
                  }
                  resolve()
                },
                fail: function(avatar_err) {
                  reject()
                }
              })
            }
          },
          fail: function(qr_err) {
            reject()
          }
        })
      })
    })
  },
  handleSaveImg() {
    return new Promise((resolve, reject) => {
      let that = this;
      let unit = that.data.screenWidth / 375    // 设备宽度/375
      let path1 = "../../images/share-bg.jpg"    // 这张图片是背景图
      let avatarUrl = that.data.avatarUrl      // 处理过的头像
      let qr_code = that.data.qr_code      // 处理过的小程序码
      let nickName = that.data.nickName     昵称
      let context = wx.createCanvasContext('shareCanvas')     获取canvas上下文实例
      let r = unit * 30      头像的半径
      let qr_r = unit * 70    小程序码的半径

      //设置画板显示，才能开始绘图  初始化，让canvas组件显示出来
      that.setData({
        is_show_gongxi_shell: false,
        is_show_canvas: true,
      })
      context.drawImage(path1, 0, 0, unit * 225, unit * 398)     画背景图
      context.setFontSize(unit * 9)     字体大小
      context.setFillStyle("#333")     颜色
      context.fillText(nickName, unit * 53, unit * 34)    写昵称和位置
      context.save();    先保存一下
      context.beginPath(); //开始绘制
      context.arc(r / 2 + unit * 20, r / 2 + unit * 23, r / 2, 0, 2 * Math.PI);   先画圆
      context.clip();
      context.drawImage(avatarUrl, unit * 20, unit * 23, r, r)    然后头像会在这个圆里面
      context.restore();
      context.drawImage(qr_code, unit * 132, unit * 140, qr_r, qr_r)       小程序码
      //把画板内容绘制成图片，并回调 画板图片路径
      context.draw(false, function() {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: unit * 225,    
          height: unit * 398, 
          destWidth: unit * 1800,    设置大一点清晰度会高
          destHeight: unit * 3200,
          canvasId: 'shareCanvas',
          success: function(res) {
            that.setData({
              shareImgPath: res.tempFilePath,
              is_show: true
            })
            if (!res.tempFilePath) {
              wx.showModal({
                title: '提示',
                content: '图片绘制中，请稍后重试',
                showCancel: false
              })
            }
            resolve()
          },
          fail: function(err) {
            reject()
          }
        })
      })
    })
  },
  //  长按canvas图片的时候保存图片
 saveImageToPhotosAlbum() {
    //画板路径保存成功后，调用方法吧图片保存到用户相册
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImgPath,
      //保存成功失败之后，都要隐藏画板，否则影响界面显示。
      success: (res) => {
        completeShare().then(res => {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '保存失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

以上就是画图的全过程，其中可以添加自己想做的操作，例如可以在保存图片成功后跳转页面什么的
然后就可以在手机上看到保存的图片啦