如何将Node.js Canvas生成的图像保存为本地PNG文件？

AI 小北

2026-8-20

Node.js Canvas生成图像保存到本地的实现方案

要在Node.js环境中将Canvas生成的图像保存到本地，无需依赖HTML相关方案，直接使用canvas模块的toBuffer方法结合Node.js内置的fs模块即可实现。以下是修改后的完整代码：

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs').promises;

async function generateAndSaveImage() {
  const canvas = createCanvas(200, 200);
  const ctx = canvas.getContext('2d');

  // 绘制文字
  ctx.font = '30px Impact';
  ctx.rotate(0.1);
  ctx.fillText('Awesome!', 50, 100);

  // 绘制文字下划线
  const text = ctx.measureText('Awesome!');
  ctx.strokeStyle = 'rgba(0,0,0,0.5)';
  ctx.beginPath();
  ctx.lineTo(50, 102);
  ctx.lineTo(50 + text.width, 102);
  ctx.stroke();

  // 加载并绘制图片
  const image = await loadImage('Templates/Question.png');
  ctx.drawImage(image, 50, 0, 70, 70);

  // 保存图像到本地
  try {
    // 生成PNG格式的二进制缓冲区
    const imageBuffer = canvas.toBuffer('image/png');
    // 将缓冲区写入本地文件，可自定义路径和文件名
    await fs.writeFile('./generated-image.png', imageBuffer);
    console.log('图像已成功保存！');
  } catch (error) {
    console.error('保存图像时出错:', error);
  }
}

generateAndSaveImage();

关键说明：

引入fs.promises：使用异步文件操作API，配合async/await避免回调嵌套，代码更易维护。
canvas.toBuffer()：将Canvas的绘制内容转换为指定格式的二进制缓冲区，支持image/png、image/jpeg等格式。如果保存JPEG，可添加质量参数：
```
const imageBuffer = canvas.toBuffer('image/jpeg', { quality: 0.9 });
```
其中quality取值范围为0-1，数值越高图像质量越好。
文件路径：fs.writeFile的第一个参数是保存路径，可使用相对路径（如示例中的当前目录）或绝对路径，确保目标目录已存在，否则会抛出错误。