小程序保存图片到本地相册

1. base64保存

base64 暂存为本地 file

base64ToFile = (base64) => {
  var timestamp = Date.parse(new Date())
  let src = `data:image/png;base64,${base64}`
  let fsm = Taro.getFileSystemManager()  // 获取文件管理器
  base64 = base64.replace(/\ +/g, "") //去掉空格方法
  base64 = base64.replace(/[\r\n]/g, "")
  let buffer = Taro.base64ToArrayBuffer(base64)  //  将 base64 字符串转成 ArrayBuffer 对象
  let fileUrl = wx.env.USER_DATA_PATH + `/share_img${timestamp}.png`  // 文件系统中的用户目录路径 （本地路径）
  fsm.writeFileSync(fileUrl, buffer, 'binary')  // 写入文件， 同步方法
  return fileUrl  // 写入成功后就可以访问到该图片路径了
}

将 file 保存到本地图库

handleSave = () => {
  const {fileUrl} = this.state
  wx.saveImageToPhotosAlbum({
    filePath: fileUrl,
    success(res) {
      wx.showToast({title: '保存成功！', icon: 'success'})
    },
    fail(res) { // 注意： wx.openSetting需要用户的点击事件才能触发，不能主动调用
      wx.showModal({
        title: '提示',
        content: '检测到您尚未开启相册授权，是否立即授权',
        success(res) {
          if (res.confirm) {
            wx.openSetting()  // 前往设置页授权
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  })
  this.setState({pictureVisible: false})
}

2. canvas保存

handleSaveCanvas() {
  let {imgUrl} = this.state
  wx.downloadFile({  // 将 canvas 暂存为本地 file
    url: imgUrl,
    success(res) {
      if (res.statusCode === 200) {
        wx.saveImageToPhotosAlbum({ // 执行相同的保存逻辑
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({title: '保存成功！', icon: 'success'})
          },
          fail() {
            wx.showModal({
              title: '提示',
              content: '检测到您尚未开启相册授权，是否立即授权',
              success(res) {
                if (res.confirm) {
                  wx.openSetting()
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            })
          }
        })
      } else {
        wx.showToast({title: '保存失败！', icon: 'error'})
      }
    },
    fail() {
      wx.showToast({title: '保存失败！', icon: 'error'})
    }
  })
}