微信小程序base64图片 canvas 画布 drawImage 实现分享海报
在微信小程序中 canvas drawImage API 传入的第一个参数是图片资源路径，这个参数通常由wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。
而 base64 格式图片数据，无法被 getImageInfo 直接调用，以下是解决方案：
首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
使用 FileSystemManager.writeFile 将 ArrayBuffer 数据写为本地用户路径的二进制图片文件
此时的图片文件路径在 wx.env.USER_DATA_PATH 中， wx.getImageInfo 接口能正确获取到这个图片资源并 drawImage 至 canvas 上
以下是具体的转换代码：
getImgCode(url) {
//自己接口获取base64图片
let res = await this.$http.post(’/WeixinMin/getEqr’, {
pages: url
})
if (res.code == 1) {
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = ‘tmp_base64src’;
const filePath = [代码]${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}[代码];
//base64 数据转换为 ArrayBuffer 数据
const buffer = wx.base64ToArrayBuffer(res.data.image);
fsm.writeFile({
filePath: filePath,
data: buffer,
encoding: ‘binary’,
success: () => {
console.log('写入成功, 路径: ', filePath);
},
fail: err => {
console.log(“失败******”, err);
},
});
}
}
