小程序 | 如何把base64格式的图片数据保存至手机相册?

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/vic_xia/article/details/86520757

需求描述:把后端返回的base64格式的图片数据,以图片的方式保存至手机相册。

解决文案:使用小程序官方API(wx.saveImageToPhotosAlbum())实现图片至手机相册的保存。但是,filePath 不支持网络图片,所以我们需要先把 base64 格式的图片数据,写入到小程序的文件系统中去,进一步取得该图片的临时路径以完成保存至手机相册的任务。

把图片保存至相册

代码实现如下

<view class="qr-image">
      <image src="{{`data:image/png;base64,${src}`}}"></image>
</view>

<view class="save" @tap="saveQrImage">保存到相册</view>
import wepy from 'wepy';

export function base64ImageHandle(base64) {
  // 指定图片的临时路径
  const path = `${wx.env.USER_DATA_PATH}/image_name.png`;
  // 把base64的图片转化成ArrayBuffer数据
  const buffer = wepy.base64ToArrayBuffer(base64);
  // 获取小程序的文件系统
  const fsm = wepy.getFileSystemManager();
  // 把arraybuffer数据写入到临时目录中
  fsm.writeFile({
    filePath: path,
    data: buffer,
    encoding: 'binary',
    success: (res)=>{
      // 把临时路径下的图片,保存至相册
      wepy.saveImageToPhotosAlbum({
        filePath: path,
        success: res => {
          wepy.showToast({title: '保存成功'});
        },
        fail: err => {wepy.showToast({title: err})}
      });
    },
    fail: (err)=>{console.log('base err', err);}
  });
}

代码解释
1)wx.env.USER_DATA_PATH 用于获取小程序中用户的数据路径,详情参见小程序文件系统
2)wx.base64ToArrayBuffer() 胜于把base64格式的图片数据转化成 ArrayBuffer 数据。
3)wx.getFileSystemManager() 胜于获取小程序的文件系统对象。
4)fsm.writeFile() 用于把二进制数据写入到指定目录路径中去。
5)wx.saveImageToPhotosAlbum() 用于把临时路径中的图片保存至手机相册中去。

需求

展开阅读全文

没有更多推荐了,返回首页