如何使用Node.js动态创建图像？

Question

我正在使用Node.js和Express web框架，我需要创建一个即时生成的图片.png或.jpg（类似于验证码），然后将该图片发送到浏览器。

最简单的方法是什么？ 在图片中，我应该写入字母/数字（最多5个）。

注：我不知道使用哪个库来连接像recaptcha模块一样的在线服务。

- Black4

Answer 1

也许您可以使用canvas？Learnboost（TJ）还提供了一个node.js实现。我认为这个视频教程很有趣。正如您从演示中看到的，在某些示例中甚至呈现文本。在npm注册表/节点模块部分中，我发现了更多有趣的链接。

- Alfred

Answer 2

这是使用canvas库的一些简单代码：

const
    fs = require("fs"),
    { createCanvas } = require("canvas");

const WIDTH = 100;
const HEIGHT = 50;

const canvas = createCanvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#222222";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "#f2f2f2";
ctx.font = "32px Arial";
ctx.fillText("Hello", 13, 35);

const buffer = canvas.toBuffer("image/png");
fs.writeFileSync("test.png", buffer);

这是生成的test.png文件：

要运行它，您必须先安装库：

npm i canvas

除了将它保存到文件中，当然你也可以将它作为 API 调用的响应发送。

有关如何使用画布绘制文本的详细信息，请参阅此MDN 文章。

- Lucio Paiva

---

我该如何获取结果？ - Niso

@Niso 如果你是指这张图片，请查看代码行 fs.writeFileSync("test.png", buffer);，它将结果写入名为“test.png”的文件。 - Lucio Paiva

很酷，谢谢@Lucio。我之前没有注意到。 - Niso