小程序生成海报保存到本地(2)-外部base64src文件

因为canvas绘制base64编码的图片在真机上不显示,并且wx.getImageInfo和wx.downloadFile不支持base64编码的图片;

  1. 首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
  2. 使用 FileSystemManager.writeFile 将 ArrayBuffer 数据写为本地用户路径的二进制图片文件
  3. 此时的图片文件路径在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 接口能正确获取到这个图片资源并 drawImage 至 canvas 上

参考:https://www.cnblogs.com/kaiye/p/9909304.html

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
 
function base64src(base64data, cb) {
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
  if (!format) {
    return (new Error('ERROR_BASE64SRC_PARSE'));
  }
  const time = new Date().getTime(); //自定义文件名
  const filePath = `${wx.env.USER_DATA_PATH}/${time}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success() {
      cb(filePath);
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'));
    },
  });
};

export { base64src };

具体实现方法:暂找不到出处。

在餐厅小程序内,需要分享多张海报,由于小程序码是后端返回的是base64编码二生成的,上面的方法是base64生成本地缓存文件,而小程序的缓存文件不会被覆盖掉,所以我们需要手动清除缓存文件,或者以时间戳问文件目录之一。

所有的临时缓存文件都会在小程序退出时清除。

你可能感兴趣的:(小程序生成海报保存到本地(2)-外部base64src文件)