微信小程序保存在线图片和视频以及base64字符串案例代码

Base64图片的下载

// pages/test/test2/test2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageurl: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    let url = options.url  // 这个url就是一个base64字符串,data:image/png;base64,...开头

    // 分片
    let quarterLength = Math.ceil(url.length / 4);

    let str1 = url.substring(0, quarterLength);
    let str2 = url.substring(quarterLength, quarterLength * 2);
    let str3 = url.substring(quarterLength * 2, quarterLength * 3);
    let str4 = url.substring(quarterLength * 3); // 将base64字符串拆分成四份,解决数据传输长度过长问题
    
    this.setData({
      imageurl: (str1 + str2 + str3 + str4).replace(/[\r\n]/g, '') // 这个base64不能有换行符之类的,不然页面展示不了,这里进行一下处理
    })
  },

  // 将base64字符串转成图片文件
  base64ToImageFile(base64Data, callback) {
    const fs = wx.getFileSystemManager();
    const timestamp = new Date().getTime();
    const filePath = `${wx.env.USER_DATA_PATH}/image_${timestamp}.png`;
    // 去掉前缀
    base64Data = base64Data.replace(/^data:image\/png;base64,/, '');
    try {
      const buffer = wx.base64ToArrayBuffer(base64Data);
      fs.writeFile({
        filePath: filePath,
        data: buffer,
        encoding: 'binary',
        success: () => {
          callback(filePath);
        },
        fail: (err) => {
          console.error('保存Base64图片到本地失败:', err);
        }
      });
    } catch (e) {
      console.error('Base64转换失败:', e);
    }
  },

  // 保存图片
  saveBase64ImageToPhotosAlbum(base64Data) {
    wx.showLoading({
      title: '正在保存...',
    })
    //视频保存到相册跟图片保存到相册使用方式相同
    //下载到本地，判断是否拥有权限
    wx.getSetting({
      withSubscriptions: true,
      success: res => {
        console.info(res.authSetting);
        if (res.authSetting['scope.writePhotosAlbum']) {
          this.base64ToImageFile(base64Data, (filePath) => {
            wx.saveImageToPhotosAlbum({
              filePath: filePath,
              success: (res) => {
                wx.hideLoading()
                setTimeout(()=>{
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                  });
                },500)
                setTimeout(()=>{
                  wx.navigateBack()
                },2500)
              },
              fail: (err) => {
                wx.hideLoading()
                setTimeout(()=>{
                  wx.showToast({
                    title: '保存失败',
                    icon: 'error'
                  });
                },500)
                setTimeout(()=>{
                  wx.navigateBack()
                },2500)
                console.error('保存图片到相册失败:', err);
              }
            });
          });
        } else {
          wx.hideLoading()
          wx.showModal({
            cancelColor: 'cancelColor',
            title: '提示',
            content: '请开启相册访问权限',
            success: res => {
              if (res.confirm) {
                wx.openSetting({
                  withSubscriptions: true,
                })
              } else if (res.cancel) {
                setTimeout(()=>{
                  wx.showToast({
                    title: '保存失败',
                    icon: 'error'
                  });
                },500)
                setTimeout(()=>{
                  wx.navigateBack()
                },2500)
                console.log('点击了取消,返回上层');
              }
            }
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示(页面显示就执行下载逻辑,不过还是建议放到onLoad生命周期内)
   */
  onShow() {
    // 这个base64不能有换行符之类的imageurl刚好在存数据时把空格去掉了
    this.saveBase64ImageToPhotosAlbum(this.data.imageurl.split(',')[1])
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

在线图片下载到相册(包含进度条)

  // 下载封面到相册
  downloadImageClick(e) {
    //视频保存到相册跟图片保存到相册使用方式相同
    //下载到本地，判断是否拥有权限
    wx.getSetting({
      withSubscriptions: true,
      success: res => {
        console.info(res.authSetting);
        if (res.authSetting['scope.writePhotosAlbum']) {
          const downloadTask = wx.downloadFile({
            url: e.currentTarget.dataset.url, // 这个就是在线图片链接
            success: res => {
              //保存到相册
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: res => {
                  console.info(res);
                  wx.showToast({
                    title: "保存成功",
                    icon: 'success'
                  });
                },
                fail: res => {
                  wx.showToast({
                    title: '保存失败',
                    icon: error
                  })
                }
              })
            },
            fail(err){
              wx.showToast({
                title: '保存失败，建议复制链接请前往浏览器下载，或者重新生成视频',
                icon:"none"
              })
            }
          });

          // 监听下载进度更新事件
          downloadTask.onProgressUpdate((res) => {
            // console.log('下载进度', res.progress);
            // console.log('已下载的数据长度', res.totalBytesWritten);
            // console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite);

            // 更新下载进度显示
            wx.showLoading({
              title: `下载中... ${res.progress}%`,
            });
          });
        } else {
          wx.showModal({
            cancelColor: 'cancelColor',
            title: '提示',
            content: '请开启相册访问权限',
            success: res => {
              if (res.confirm)
                wx.openSetting({
                  withSubscriptions: true,
                })
            }
          })
        }
      }
    })
  },

在线视频下载到相册(包含进度条)

 //下载视频到相册
  downloadVideoClick(e) {
    console.log(e.currentTarget.dataset.url);
    //视频保存到相册跟图片保存到相册使用方式相同
    //下载到本地，判断是否拥有权限
    wx.getSetting({
      withSubscriptions: true,
      success: res => {
        console.info(res.authSetting);
        if (res.authSetting['scope.writePhotosAlbum']) {
          const downloadTask = wx.downloadFile({
            url: e.currentTarget.dataset.url, // 这个就是在线视频链接
            success: res => {
              //保存到相册
              wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath,
                success: res => {
                  console.info(res);
                  wx.showToast({
                    title: "保存成功",
                    icon: 'success'
                  });
                },
                fail: res => {
                  wx.showToast({
                    title: '保存失败',
                    icon: "error"
                  })
                }
              })
            },
            fail(err){
              console.log(err);
              wx.showToast({
                title: '保存失败，建议复制链接请前往浏览器下载，或者重新生成视频',
                icon:"none"
              })
            }
          });

          // 监听下载进度更新事件
          downloadTask.onProgressUpdate((res) => {
            // console.log('下载进度', res.progress);
            // console.log('已下载的数据长度', res.totalBytesWritten);
            // console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite);

            // 更新下载进度显示
            wx.showLoading({
              title: `下载中... ${res.progress}%`,
            });
          });
        } else {
          wx.showModal({
            cancelColor: 'cancelColor',
            title: '提示',
            content: '请开启相册访问权限',
            success: res => {
              if (res.confirm)
                wx.openSetting({
                  withSubscriptions: true,
                })
            }
          })
        }
      },
      fail(err){
        console.log(err);
      }
    })
  },