如何将表情符号图像转换为 JavaScript 中的 Unicode，或反映给定 Unicode 的自定义表情符号？

Question

我正在尝试了解如何为用户输入实现自定义表情符号，但我似乎无法掌握它。

我看到像 Facebook 这样的网站最初会显示一个小型 .png 表情符号图像列表，然后，一旦您单击该图像，它就会将其转换为 Unicode 字符。

此外，我一直在研究使用精灵图像的自定义表情包。

我找不到任何 material 解释如何使用 sprite 或单个图像，然后将其动态转换为 Unicode 以进行显示稍后。

如果您不能即时将图像转换为 Unicode，那么不同的网站如何使用给定的 Unicode 字符反映他们自己的自定义版本的表情符号？

Answer 1

我想点开OpenMoji项目进行查询： https://github.com/hfg-gmuend/openmoji

在数据文件夹中，您会看到可以使用的整齐的查找文件。基本上他们用字体中对应的 unicode 字符的名称保存 png，更高级的信息在 json:

{
    "emoji": "",
    "hexcode": "1F600",
    "group": "smileys-emotion",
    "subgroups": "face-smiling",
    "annotation": "grinning face",
    "tags": "face, grin",
    "openmoji_tags": "smile, happy",
    "openmoji_author": "Emily Jäger",
    "openmoji_date": "2018-04-18",
    "skintone": "",
    "skintone_combination": "",
    "skintone_base_emoji": "",
    "skintone_base_hexcode": "",
    "unicode": 1,
    "order": 1
}

编辑：抱歉，我以为您对如何使用 png 构建查找 table 感兴趣。对于向网页添加表情符号字体的问题，我的解决方案是添加字体，但这不起作用：

我认为目前这个问题没有“合适”的解决方案。

编辑 2：

<!DOCTYPE html>
<head>
    <style>
        @font-face {
            font-family: "OpenMoji Black";
            src: url(OpenMoji-Black.ttf) format("truetype");
        }
        .openmoji { 
            font-family: "OpenMoji Black", fantasy;
        }
    </style>
    </head>
    <body class="openmoji">
        <span>Hello World &#x1F605;  &#x1F607;</span>
    </body>
</head>

在 Chrome、Firefox 甚至 IE 上与 https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf 配合使用时效果很好。

Answer 2

一般来说，有两种方法可以将表情符号功能添加到用户输入中：

Unicode字符，它依赖于开发者导入的自定义字体或浏览器供应商的默认字体，以确定使用哪个版本的特定表情符号。您只需输入 unicode 字符串，浏览器就会根据字体插入给定的表情符号。 Check out unicode emojis here. and also 详细解释了表情符号的 unicode 用法。
将图像插入富文本编辑器 (RTE)。 此技术依赖于单个表情符号图像（通常为 .png）或 sprite sheets that the developer can use with the RTE. This article开始的地方。

第一种方法可能更难自定义表情符号，除非您要制作自定义字体。 TinyMCE 等 RTE 插件是修改 unicode 表情符号的简单快捷方式。
第二种方法稍微复杂一些，Facebook 和 Twitter 等一些大公司都在使用这种方法。与大多数编码一样，复杂性带来灵活性。此方法涉及以编程方式将一些纯文本标志（例如 :smile:）转换为 html 元素（例如 <img src='smile.png' />）。它通过使用 contenteditable div 标签创建一个文本区域。在此 div 中，以编程方式编辑内容以添加或删除表情符号图像、bold/italic 字母等...

为了更好地理解第二种方法的工作原理，我创建了 react-ez-emoji，这是一个轻量级的、支持表情符号的 contenteditable div，允许您使用任何您喜欢的表情符号图像文件.对于任何想要研究该主题的人来说，这将是一个好的开始，但我不建议将其用于生产。

This article 很好地解释了 Unicode 表情符号的局限性，以及为什么第二个选项更具可定制性和效率。

如何将表情符号图像转换为 JavaScript 中的 Unicode，或反映给定 Unicode 的自定义表情符号？

How to convert an emoji image to Unicode in JavaScript, or reflect a custom emoji for a given Unicode?

javascript

unicode

sprite

emoji