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

Question

我正在使用node.js和Express web框架,我需要创建一个动态图像.png或.jpg(如验证码),然后我必须将该图像发送到浏览器.

最简单的方法是什么？在图像中我应该写字母/数字(最多5).

PS我不知道连接到在线服务的库使用哪个库作为recaptcha模块.

Answer 1

也许你可以使用帆布？Learnboost(TJ)还在node.js中实现了一个实现.我认为这个截屏视频很有意思.正如您从演示文稿中看到的,它甚至在一些示例中呈现文本.同样在npm注册表/节点模块部分,我发现了更多有趣的链接

Answer 2

下面是一些使用画布库的简单代码：

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 文章。