今天做小程序有一个canvas画布绘制功能;需要将接口返回base64用canvas渲染出来
废话也不多说直接看代码吧
<canvas type="2d" id="canvasId" style="width: 42%;height: 20vh;margin-top: 20%;" ></canvas>
样式可以根据自己需求自行调整
const fs = wx.getFileSystemManager();
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
//将base64图片写入
fs.writeFile({
filePath: codeimg,
data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
encoding: 'base64',
success: () => {
console.log(codeimg);
// console.log(res.data.slice(22));
wx.createSelectorQuery().select('#canvasId').fields({
node: true,
size: true
})
.exec((res) => {
console.log(res);
let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文
let canvas = res[0].node;
// console.log(canvas);
const bg = canvas.createImage();
console.log(bg);
bg.src = codeimg;
// console.log(ctx);
bg.onload = function () {
ctx.drawImage(bg,0, 0,300,150);
console.log(bg);
// console.log(ctx.drawImage(bg,76, 175, 140, 140));
}
})
}
}
按上代码自习复制修改,
如果点击后能如下打印
但是页面不显示就清理一下微信开发工具的缓存重新运行就可以了