在微信小程序中 canvas drawImage 传入的第一个参数是 imageResource 图片资源路径, 这个参数通常由从相册选择图片 或 获取图片信息来获得.
而 base64 格式图片数据, 无法被 getImageInfo 直接调用, 以下是解决方案:
首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
使用 将 ArrayBuffer 写为本地用户路径的二进制图片文件
此时的图片文件路径在 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;
来源: https://www.qcloud.com/developer/article/1360871