美文网首页
微信小程序保存canvas图片

微信小程序保存canvas图片

作者: IamaStupid | 来源:发表于2020-08-28 10:31 被阅读0次

xwml文件

<button class="g-btn" catchtap="saveImgBtnEvent ">保存图片</button>

js文件

saveImgBtnEvent () {
    let that = this;
    let cvsSize = this.data.cvsSize;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: cvsSize.width,
      height: cvsSize.height,
      destWidth: cvsSize.width,
      destHeight: cvsSize.height,
      canvasId: 'myCanvas',
      success (res) {
        console.log('canvasToTempFilePath:', res.tempFilePath)
        that.saveImageFile(that, res.tempFilePath)
      },
      fail () {
        wx.showToast({
          title: '保存失败~',
          icon: 'none'
        })
      }
    });
  },
saveImageFile(that, filePath) {
    // 获取用户是否开启用户授权相册
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          that.openSetting(filePath)
        } else {
          // 有则直接保存
          wx.saveImageToPhotosAlbum({
            filePath: filePath,
            success() {
              wx.showToast({
                title: '保存成功!!'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败!!',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  },
  openSetting (filePath) {
    wx.showModal({
      title: '权限申请',
      content: '点击 “确定” 按钮,打开相册的权限设置界面',
      cancelText: '取消',
      confirmText: '确定',
      success(res) {
        if (res.confirm) {
          wx.openSetting({
            success: function(res) {
              wx.saveImageToPhotosAlbum({
                filePath: filePath,
                success() {
                  wx.showToast({
                    title: '保存成功!'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败!',
                    icon: 'none'
                  })
                }
              })
            },
            fail: function(res) {
              wx.showToast({
                title: '你阻止了授权!',
                icon: 'none'
              })
            }
          });
        }
      }
    });
  },

相关文章

网友评论

      本文标题:微信小程序保存canvas图片

      本文链接:https://www.haomeiwen.com/subject/zlzcsktx.html