微信小程序 base64 图片 canvas 画布 drawImage 实现

Posted 猫哥_kaiye | 编程笔记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 base64 图片 canvas 画布 drawImage 实现相关的知识,希望对你有一定的参考价值。

在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImagewx.getImageInfo 获取图片信息来获得。

而 base64 格式图片数据,无法被 getImageInfo 直接调用,以下是解决方案:

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

以下是具体的 base64src.js 函数代码,注意写文件时去掉 base64 的头信息:

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = ‘tmp_base64src‘;

const base64src = function(base64data) {
  return new Promise((resolve, reject) => {
    const [, format, bodyData] = /data:image/(w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      reject(new Error(‘ERROR_BASE64SRC_PARSE‘));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: ‘binary‘,
      success() {
        resolve(filePath);
      },
      fail() {
        reject(new Error(‘ERROR_BASE64SRC_WRITE‘));
      },
    });
  });
};

export default base64src;

 

以上是关于微信小程序 base64 图片 canvas 画布 drawImage 实现的主要内容,如果未能解决你的问题,请参考以下文章

canvas微信小程序如何导入个人微信

微信小程序 canvas 绘图问题总结

微信小程序 怎么实现view内容保存到本地图片

微信小程序如何将base64转成file格式

微信小程序 base64格式图片的展示保存及pdf打开

小程序 使用upng.js 把小程序选择的图片转换为base64