美文网首页
微信小程序保存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