如何将 canvas 绘制的内容保存为图片？

推荐答案

// www.javascriptcn.com code example
// 获取 canvas 上下文
const ctx = wx.createCanvasContext('myCanvas');

// 绘制内容
ctx.fillRect(10, 10, 100, 100);

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

本题详细解读

1. 获取 canvas 上下文

首先，你需要通过 wx.createCanvasContext 方法获取 canvas 的绘图上下文。这个上下文对象允许你在 canvas 上进行各种绘图操作。

const ctx = wx.createCanvasContext('myCanvas');

2. 绘制内容

在获取到上下文后，你可以使用各种绘图 API 在 canvas 上绘制内容。例如，使用 fillRect 方法绘制一个矩形。

ctx.fillRect(10, 10, 100, 100);

3. 调用 draw 方法

在绘制完成后，需要调用 ctx.draw 方法将绘制的内容渲染到 canvas 上。draw 方法的第一个参数是一个布尔值，表示是否保留之前的绘制内容。第二个参数是一个回调函数，在绘制完成后执行。

ctx.draw(false, () => {
  // 绘制完成后的回调
});

4. 保存 canvas 为图片

在绘制完成后，你可以使用 wx.canvasToTempFilePath 方法将 canvas 的内容保存为图片。这个方法会生成一个临时文件路径，你可以将这个路径用于后续操作，比如展示或上传。

// www.javascriptcn.com code example
wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log('图片保存成功', res.tempFilePath);
  },
  fail(err) {
    console.error('图片保存失败', err);
  }
});

5. 处理成功与失败

wx.canvasToTempFilePath 方法提供了 success 和 fail 回调函数，分别用于处理保存成功和失败的情况。你可以在这些回调函数中执行相应的操作，比如提示用户保存成功或失败。

success(res) {
  console.log('图片保存成功', res.tempFilePath);
},
fail(err) {
  console.error('图片保存失败', err);
}