微信小程序如何将 view 内容转到 canvas 画布保存到本地呀？

Question

点了保存手机上没照片，小程序也没有反应，找了两天答案都没找到！用 gpt4 回答的代码都不对，有没有技术专家给个实例

Answer 1

源于chatGPT仅供参考

要将一个`<view>`的内容绘制到`<canvas>`画布上，并保存为图片到本地，可以使用`wx.canvasToTempFilePath` API。以下是一个示例代码：

```js
// 在页面JS文件中获取一个<view>的节点
const query = wx.createSelectorQuery();
query.select('#my-view').fields({ node: true, size: true })
  .exec((res) => {
    const canvasNode = res[0].node;
    const canvasWidth = res[0].width;
    const canvasHeight = res[0].height;

    // 创建离屏的<canvas>画布
    const ctx = wx.createCanvasContext('my-canvas', this);

    // 将<view>内容绘制到<canvas>上
    ctx.drawImage(canvasNode, 0, 0, canvasWidth, canvasHeight);

    // 绘制完成后调用toTempFilePath方法将画布保存为图片
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'my-canvas',
        success: (res) => {
          // 图片保存成功后的逻辑
          console.log(res.tempFilePath);
        },
        fail: (err) => {
          // 图片保存失败的逻辑
          console.error(err);
        }
      }, this);
    });
  });

需要注意的是，在页面的WXML文件中需要定义一个<view>和<canvas>元素，并给它们分别设置一个唯一的id属性（例如id="my-view"和id="my-canvas"）。然后在JS文件中使用wx.createSelectorQuery()来获取<view>节点，并通过wx.createCanvasContext()创建一个离屏的<canvas>画布。接着使用ctx.drawImage()将<view>的内容绘制到<canvas>上。

最后在ctx.draw()的回调函数中，通过wx.canvasToTempFilePath()将<canvas>保存为临时文件路径，并在success回调中获取到图片的本地路径。

请确保微信开发者工具的基础库版本高于2.9.0，否则可能会出现部分API不可用的情况。另外，请注意用户授权的问题，确保小程序已经获得了保存图片的权限。

希望这个示例能够帮助你实现在微信小程序中将<view>内容绘制到<canvas>上并保存到本地的功能。如有其他问题，请随时提问。

```