JiangYunPhotos_2.0_WxApp/miniprogram/pages/takeBill/canvas/canvas.js

Page({
  data: {
    src: './test-photo.png',
    cw: 0,
    ch: 0,
  },
  test() {
    wx.getImageInfo({
      src: this.data.src,
      success: e => {
        console.log(e)
        let ch = e.height * 2
        let cw = e.width * 2
        this.setData({
          ch,
          cw
        })
        const query = wx.createSelectorQuery();
        query.select('#myCanvas').node().exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          const img = canvas.createImage();
          let h = ch / 2
          let w = cw / 2
          canvas.height = h * 0.85
          canvas.width = w * 0.9
          img.src = this.data.src
          img.onload = () => {
            ctx.drawImage(img, -w * 0.05, -h * 0.05);
          }
        })
      }
    })

  },

  async saveImg() {
    const query = wx.createSelectorQuery();
    const canvas = await new Promise((resolve, reject) => {
      query.select('#myCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec(async (res) => {
          resolve(res[0].node);
        })
    });

    wx.canvasToTempFilePath({
      canvas,
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (data) {
            wx.showToast({
              title: '已保存到相册',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (err) {
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
              wx.showModal({
                title: '提示',
                content: '需要您授权保存相册',
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        // wx.showModal({
                        //   title: '提示',
                        //   content: '获取权限成功,再次点击图片即可保存',
                        //   showCancel: false,
                        // })
                      } else {
                        wx.showModal({
                          title: '提示',
                          content: '获取权限失败',
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData", failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
            } else {
              wx.showToast({
                title: '请保存图片',
                icon: 'none',
                duration: 2000
              })
            }
          },
        })
      },
      fail(res) {
        console.log('fail');
      }
    }, this)
  },

  onLoad(options) {
    this.setData({
      src: options.src
    })
    this.test()
  }
})