Node.js 中的 Emoji 到 PNG 或 JPG - 如何？

Posted 2023-03-15

【中文标题】Node.js 中的 Emoji 到 PNG 或 JPG - 如何？

【英文标题】：Emoji to PNG or JPG in Node.js - how to?

【发布时间】：2017-09-23 21:31:05

【问题描述】：

对于我正在进行的项目，我需要从表情符号（最好是 Apple 表情符号）生成图像文件。我认为这应该是一件相当简单的事情，但我使用的每一个工具，最终都会碰壁。

我还考虑过使用表情符号集，例如 this one，我可以在需要时进行查询。不幸的是，我链接的那个没有 Unicode 9.0 表情符号，例如鳄梨 (????) 虾 (????) 或 harambe (????)。你知道这样一个最新的集合吗？

代码方面，我尝试过 opentype.js，但它不支持 .ttc 字体，这是我 mac 上表情符号字体的扩展（Apple Color Emoji.ttc）。我已将字体转换为 .ttf，但这也不起作用：

  var opentype = require('opentype.js');
  opentype.load('./build_scripts/apple_color_emoji.ttf', function (err, font) 
      if (err) 
          alert('Could not load font: ' + err);
       else 
          console.log("loaded the font",font);

          var Canvas = require('canvas')
            , Image = Canvas.Image
            , canvas = new Canvas(200, 200)
            , ctx = canvas.getContext('2d');
          var path = font.getPath('????????', 0, 150, 72);
          path.draw(ctx);
          console.log('<img src="' + canvas.toDataURL() + '" />');
      
  );

结果如下：

我试过 fontkit，它应该能够读取 .ttc 文件，但如果我尝试使用 Apple Color Emoji 字体，它会引发错误。

  var fontkit = require('fontkit');
  var font = fontkit.openSync('./build_scripts/Apple Color Emoji.ttc'); 
  // TypeError: font.layout is not a function

如果我对转换后的 .ttf 文件尝试同样的操作，我最终会得到一些不正确的 svg：

  var fontkit = require('fontkit');
  var font = fontkit.openSync('./build_scripts/apple_color_emoji.ttf');
  var run = font.layout('????????');
  var svg = run.glyphs[0].path.toSVG();

  console.log(svg);
  // M-1 0ZM799 800Z

我的问题是，我是否以正确的方式接近这一点？将我机器上已有的表情符号转换为 .png 或其他格式似乎应该相当简单，但我就是无法让它工作。

编辑：

我在this repo 中找到了表情符号名称的十六进制代码列表（对rodrigopolo 大喊大叫）。现在我可以简单地使用它了：

var emoji = "????".codePointAt(0).toString(16); //1f60a
var emojiFile = fs.readFileSync('./my-emoji-folder/' + emoji + '.png');

不过，如果有人对这个问题有编码解决方案，那就太好了！

进一步编辑：

原来我发现的第一个解决方案只包含最高 Unicode 8.0 的表情符号，而不是 Unicode 9.0。我发现了一个红宝石宝石gemoji，它可以提取表情符号。如果您不是 ruby​​ 开发人员（我不是），您可以在 shell 中简单地使用以下命令：

git clone https://github.com/github/gemoji.git
cd gemoji
bundle install
bundle exec gemoji extract some-directory/emoji

现在您的 some-directory/emoji 文件夹中有 Unicode 9.0 表情符号！

【问题讨论】：

这似乎是一个非常深奥的问题 (+1)。出于好奇，您究竟为什么需要用表情符号创建图像？

哈哈，是的，这可能就是我很难找到解决方案的原因。我正在试验一个反应项目，我可以通过使用不同的 .env 文件构建网站来改变网站的外观。我已经决定将网站图标作为表情符号，因此我需要一种方法来根据 .env 中指定的表情符号动态生成它们。但对于更日常的使用，您可以使用它在尚不支持它们的设备上显示最新的表情符号。

谁说fontkit支持TTC？因为它绝对没有。将您的 TTC 解压缩为 实际 字体文件，然后将其用于图像生成。此外，如果您找到了解决方案，请不要将其添加为“编辑”，请写下答案，然后在一天后接受它。没有答案的问题只会被时间遗忘，而不是谷歌索引。

他们的文档上似乎是这样：github.com/devongovett/fontkit

它如何与谷歌索引一起工作？我不接受我自己的答案，因为我仍在寻找一个非 hacky 的解决方案

【参考方案1】：

我可以通过从字体集合中选择一种字体来使其与 fontkit 一起使用。我还没有发现使用“Apple Color Emoji.ttc”中包含的任何一个 TTF 会产生不同结果的案例。

const fs = require('fs');
const fontkit = require('fontkit');
const emoji = require('node-emoji');
const font = fontkit.openSync('./Apple Color Emoji.ttc').fonts[0];

let emo = emoji.get('100');
let run = font.layout(emo);
let glyph = run.glyphs[0].getImageForSize(128)

fs.writeFileSync('100.png', glyph.data);

【讨论】：

正是我想要的！为了简单起见，我将删除 node-emoji 依赖项：let run = font.layout('?');.

另外，要记住一件事，getImageForSize 函数以像素为单位获取表情符号图像，看起来 Apple Color Emoji 的最大尺寸为 160。