Node.js 使用 Canvas 在图片上添加文字并输出多张图片

可以使用 node-canvas 库来实现这个功能。

1. 首先安装 node-canvas 库：npm install canvas

2. 创建一个 canvas 对象，加载图片：

const { createCanvas, loadImage } = require('canvas');
const canvas = createCanvas(100, 100); // 创建一个 100*100 的 canvas
const ctx = canvas.getContext('2d');
const img = await loadImage('path/to/image.png'); // 加载图片
ctx.drawImage(img, 0, 0); // 绘制图片

3. 给图片添加文字，输出新的图片：

ctx.font = 'bold 20px Arial'; // 设置字体样式
ctx.fillText('Hello World', 10, 50); // 添加文字
const outputBuffer = canvas.toBuffer('image/png'); // 转换成 buffer
// 将 buffer 保存成文件或输出到浏览器

4. 将上面的代码封装成一个函数，实现输出多个图片：

async function addTextToImage(imagePath, text, outputFilePath) {
  const { createCanvas, loadImage } = require('canvas');
  const canvas = createCanvas(100, 100);
  const ctx = canvas.getContext('2d');
  const img = await loadImage(imagePath);
  ctx.drawImage(img, 0, 0);
  ctx.font = 'bold 20px Arial';
  ctx.fillText(text, 10, 50);
  const outputBuffer = canvas.toBuffer('image/png');
  fs.writeFileSync(outputFilePath, outputBuffer);
}

// 调用函数输出多个图片
addTextToImage('path/to/image1.png', 'Text1', 'output/image1.png');
addTextToImage('path/to/image2.png', 'Text2', 'output/image2.png');
addTextToImage('path/to/image3.png', 'Text3', 'output/image3.png');

这样就可以输出多张添加了不同文字的图片了。