小程序 | 如何把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日