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

Question

我最近遇到了一个问题。

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

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

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

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

谢谢。

Answer 1

通过使用 opentype.js 和 canvas 找到了一种方法，只需生成一个虚拟的 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`);

Answer 2

而不是使用像 node-canvas 这样的东西（这是对 Node 最好的 canvas 仿真，但也需要在安装时编译并且对 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 width="${w}" height="${h}" viewBox="${x1} ${y1} ${w} ${h}">
  ${pathElementString}
</svg>`;

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

然后从 SVG 到 PNG 变成了“使用很多可能的工具中的任何一个，都是基于节点的（例如 convert-svg-to-png) or CLI-based”，因为你总是可以设置一个文件夹观察器来寻找新的 SVG 文件被放入 folder/dir（作为 npm 脚本的一部分，或作为独立的系统任务），或者您可以让代码触发 exec 或 spawn 将文件写入磁盘后。

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

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

Converting OpenType / TrueType format to png images using NodeJS

javascript

fonts

graphics

truetype

opentype