使用 NodeJS 将 OpenType / TrueType 格式转换为 png 图像

Posted 2023-03-15

【中文标题】使用 NodeJS 将 OpenType / TrueType 格式转换为 png 图像

【英文标题】：Converting OpenType / TrueType format to png images using NodeJS

【发布时间】：2021-10-12 01:04:52

【问题描述】：

我最近遇到了一个问题。

我需要使用以下代码应用程序从字体文件 otf/ttf 生成图像：

let font = loadFont("Verdana.ttf");
font.Generate("Hello world");

将输出一个带有 Verdana 字体的 Hello world 图像。我搜索了一下，找到了可以解析字体文件的库 opentype.js，但我真的不明白下一步该怎么做，有很多数据，我不知道哪个可以曾经做我需要做的事。

说实话，我真的不知道从哪里开始，如果有人有关键字或其他可能对我有用的东西，我很高兴知道。

谢谢。

【参考方案1】：

与其使用 node-canvas 之类的东西（这是 Node 的最佳画布仿真，但也需要在安装时编译并严重依赖 GTK），您可以只要求 OpenType.js 排版文本然后为此获取 SVG：

const font = opentype.load('yourfonthere');
const yourString = `.....`;
const path = font.getPath(yourString, 0, 0);
const pathElementString = path.toSVG();

然后您可以将该路径放入 SVG 文档中：

const  x1, x2, y1, y2  = path.getBoundingBox();
const w = x2 - x1;
const h = y2 - y1;
const svgDocument = `<svg   viewBox="$x1 $y1 $w $h">
  $pathElementString
</svg>`;

现在您有了一个 SVG 文件，您可以将其保存在内存中或写入磁盘。

从 SVG 到 PNG 然后变成“使用任何一种可能的工具，无论是基于节点的（例如convert-svg-to-png）还是CLI-based”，因为您总是可以设置一个看起来用于放置在文件夹/目录中的新 SVG 文件（作为 npm 脚本的一部分，或作为独立的系统任务），或者您可以在将文件写入磁盘后让代码触发 exec 或 spawn .

（请记住，如果您使用 CLI 路线，您几乎可以肯定会将您的代码锁定到一个特定的操作系统中，所以……不建议这样做。也就是说，记住这一点总是很重要的，因为您使用的是 Node ，您不必让 Node 做所有事情。将文件写入磁盘，然后使用非常出色的 CLI 实用程序来完成最后一个或多个步骤是一种完全有效的编程方法）

【讨论】：

哦，我首先在搜索类似的东西，谢谢！

【参考方案2】：

通过使用 opentype.js 和 canvas 找到了一种方法，只需生成一个虚拟画布，然后将我的文本绘制到其中。完成工作后，我使用 canvas.getDataURL() 函数从 base64 URL 检索数据。使用名为 image-data-uri 的 npm 包将 base64 转换为 png。

const  createCanvas, loadImage  = require('canvas')

const width = this.font.getAdvanceWidth(value);
const canvas = createCanvas(width + 20, 80)
const ctx = canvas.getContext("2d");
const path = this.font.getPath(value, 10, 65, 72);
            
path.fill = "white";
path.draw(ctx);
ImageDataURI.outputFile(canvas.toDataURL("image/png"), `./out.png`);

【讨论】：

如果您要编写代码问题的答案，请记住显示代码。如果您使用 node-canvas 和 opentype.js 使其工作，请显示生成文件的（最少）代码。但是，请注意，更好的解决方案是让 opentype.js 将文本排版为 SVG，然后将该 SVG 保存为 PNG，这样您就不需要需要安装时编译的依赖项，并且会占用大量资源内存量（因为根据定义，画布需要 4xWxH 字节仅用于其位图）

但是你忘记了显示你正在使用哪个画布库的部分，这很重要，因为有几个 =)