在微信小程序中 canvasdrawImage API 传入的第一个参数是 imageResource 图片资源路径，这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。
而 base64 格式图片数据，无法被 getImageInfo 直接调用，以下是解决方案：
首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
使用FileSystemManager.writeFile 将 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) {
returnnewPromise((resolve, reject) => {
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if(!format) {
reject(newError('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(newError('ERROR_BASE64SRC_WRITE'));
},
});
});
};
export default base64src;
然后
import base64src from '上面文件地址'
base64src(base64地址).then((res)=>{
console.log(res)
})
