在微信小程序中 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);
},
});
}
}
目前可以使用canvas.createImage生成image对象来解决canvas导入base64图片的问题，相对来说简单多了,目前测试有效。
wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d'); let img = canvas.createImage(); // 注意是使用canvas实例 不是ctx img.src = base64String; // 带编码的头信息的base64字符串 data:image/png;base64,xxx img.onload = () => { ctx.drawImage(img, 100, 0, 100, 100); } }) }亲测之后发现，其实不使用了wx.base64ToArrayBuffer也是没问题的，文档里说基础库2.4.0以后停止维护，可能以后版本不支持了，所以简化了操作，直播把base64的数据传到data就行了。
生成之后的二维码用开发者工具解析失败，该怎么办？
刚测试成功image.src可以接受直接用base64数据赋值。但是我发现另外一个问题，iOS下canvas尺寸不能太大，不然无法导出图片。
工具可以，真机图片不出来，怎么回事啊？
writeFile的时候 可以直接把 encoding选成base64的
我的没有效果？？ util.POSTNOECODE("Wx/GetUnlimited",params,res=>{ var base64Data = res.data.data; /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64 util.base64src(base64Data ).then(res=>{ console.log("then") console.log(res) // context.drawImage(res,0,0,200,200) this.setData({ tempPath:res }) const ctx = wx.createCanvasContext('myCanvas') ctx.drawImage(res, 0, 0, 1500, 1000) })