微信小程序canvas画布渲染图片

今天做小程序有一个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));
                }
              })
          }
        }

按上代码自习复制修改，

如果点击后能如下打印

但是页面不显示就清理一下微信开发工具的缓存重新运行就可以了