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

Question

我正在使用node.js和Express网络框架，我需要创建一个即时图像 .png 或 .jpg （如验证码），然后我必须将该图像发送到浏览器。

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

P.S。我不知道连接到在线服务的库使用哪个库，就像重新访问模块一样。

Answer 1

也许你可以使用canvas？还有一个implementation in node.js by Learnboost(TJ)。我认为this screencast很有意思。正如您从演示文稿中看到的，它甚至在一些示例中呈现文本。同样在npm registry / node modules section我发现了更多有趣的链接

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

您当然可以将其保存为文件，而不是将其保存为文件。

有关如何使用画布绘制文本的更多详细信息，请参见此MDN article。