uni-app 中如何将 canvas 绘制的内容保存为图片？

推荐答案

在 uni-app 中，可以通过 uni.canvasToTempFilePath 方法将 canvas 绘制的内容保存为图片。具体步骤如下：

1. 获取 canvas 上下文并绘制内容。
2. 使用 uni.canvasToTempFilePath 将 canvas 内容转换为临时文件路径。
3. 将临时文件保存到相册或进行其他操作。

示例代码：

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

// 绘制内容
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 75);

// 绘制完成后调用 draw 方法
ctx.draw(false, () => {
  // 将 canvas 内容转换为临时文件路径
  uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      // 获取临时文件路径
      const tempFilePath = res.tempFilePath;
      console.log('临时文件路径:', tempFilePath);

      // 将图片保存到相册
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          console.log('图片保存成功');
        },
        fail: (err) => {
          console.log('图片保存失败', err);
        }
      });
    },
    fail: (err) => {
      console.log('canvasToTempFilePath 失败', err);
    }
  });
});

本题详细解读

1. 获取 canvas 上下文

在 uni-app 中，首先需要通过 uni.createCanvasContext 方法获取 canvas 的上下文对象。这个上下文对象用于在 canvas 上绘制图形、文本等。

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

2. 绘制内容

使用获取到的上下文对象 ctx，可以调用各种绘图方法在 canvas 上绘制内容。例如，绘制一个红色的矩形：

ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 75);

3. 调用 draw 方法

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

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

4. 将 canvas 内容转换为图片

使用 uni.canvasToTempFilePath 方法可以将 canvas 的内容转换为临时文件路径。这个方法接受一个配置对象，其中 canvasId 是 canvas 的标识符，success 和 fail 分别是成功和失败的回调函数。

// www.javascriptcn.com code example
uni.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: (res) => {
    const tempFilePath = res.tempFilePath;
    console.log('临时文件路径:', tempFilePath);
  },
  fail: (err) => {
    console.log('canvasToTempFilePath 失败', err);
  }
});

5. 保存图片到相册

获取到临时文件路径后，可以使用 uni.saveImageToPhotosAlbum 方法将图片保存到用户的相册中。

// www.javascriptcn.com code example
uni.saveImageToPhotosAlbum({
  filePath: tempFilePath,
  success: () => {
    console.log('图片保存成功');
  },
  fail: (err) => {
    console.log('图片保存失败', err);
  }
});

通过以上步骤，你可以将 uni-app 中 canvas 绘制的内容保存为图片，并进一步保存到用户的相册中。