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

需求描述：把后端返回的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() 用于把临时路径中的图片保存至手机相册中去。

---

END 2018年12月20日