有没有精通微信小程序canvas组件的精英，帮我看下这个页面转图片的代码是否可行？

Question

要生成并下载小程序Canvas中的图片，你可以使用以下代码：

首先，将view页面节点转换为Canvas节点，并绘制到Canvas上：

// 获取页面节点信息
const query = wx.createSelectorQuery();
query.select('#page-id').node().exec((res) => {
  const canvasNode = res[0].node;

  // 创建绘图上下文对象
  const ctx = wx.createCanvasContext('canvas-id');

  // 设置Canvas的宽高为节点的宽高
  const width = canvasNode.width;
  const height = canvasNode.height;
  ctx.canvas.width = width;
  ctx.canvas.height = height;

  // 绘制节点内容到Canvas上
  ctx.drawImage(canvasNode, 0, 0, width, height);
  ctx.draw(false, () => {
    // 在绘制完成回调中执行保存图片的操作
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width,
      height,
      canvasId: 'canvas-id',
      success: (res) => {
        const tempFilePath = res.tempFilePath;

        // 保存图片到手机相册
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success: () => {
            console.log('图片保存成功');
          },
          fail: (error) => {
            console.error('图片保存失败', error);
          },
        });
      },
      fail: (error) => {
        console.error('Canvas转换图片失败', error);
      },
    });
  });
});

上述代码中，你需要将'#page-id'替换为你要转换为图片的view页面节点的ID，'canvas-id'替换为Canvas的ID，可以在wxml文件中定义。这段代码将绘制完的Canvas图片保存到手机相册中。

记得在使用之前，先在小程序的app.json文件中进行相关配置，允许使用Canvas和保存图片到相册的权限：

{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    },
    "scope.writePhotosAlbum": {
      "desc": "保存图片到相册"
    }
  }
}

Answer 1

没啥问题 要注意的是 微信小程序的API调用是异步的 因此在执行代码时需要确保每个API调用都已经完成了 还要确认页面上的元素都存在