我最近遇到了一个问题。
我需要使用以下代码应用程序从字体文件 otf/ttf 生成图像：
let font = loadFont("Verdana.ttf");
font.Generate("Hello world");
将输出一个带有 Verdana 字体的 Hello world 图像。我搜索了一下，找到了可以解析字体文件的库 opentype.js，但我真的不明白下一步该怎么做，有很多数据，我不知道哪个可以曾经做我需要做的事。
说实话，我真的不知道从哪里开始，如果有人有关键字或其他可能对我有用的东西，我很高兴知道。
谢谢。
【问题讨论】：
标签： javascript fonts graphics truetype opentype
与其使用 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 width="${w}" height="${h}" viewBox="${x1} ${y1} ${w} ${h}">
${pathElementString}
</svg>`;
现在您有了一个 SVG 文件，您可以将其保存在内存中或写入磁盘。
从 SVG 到 PNG 然后变成“使用任何一种可能的工具，无论是基于节点的（例如convert-svg-to-png）还是CLI-based”，因为您总是可以设置一个看起来用于放置在文件夹/目录中的新 SVG 文件（作为 npm 脚本的一部分，或作为独立的系统任务），或者您可以在将文件写入磁盘后让代码触发 exec 或 spawn .
（请记住，如果您使用 CLI 路线，您几乎可以肯定会将您的代码锁定到一个特定的操作系统中，所以……不建议这样做。也就是说，记住这一点总是很重要的，因为您使用的是 Node ，您不必让 Node 做所有事情。将文件写入磁盘，然后使用非常出色的 CLI 实用程序来完成最后一个或多个步骤是一种完全有效的编程方法）
【讨论】：
通过使用 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`);
【讨论】：