Question

我试图了解如何实现用于用户输入的自定义表情符号，但似乎无法解决问题。

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

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

我找不到任何材料，它说明了如何利用子画面或单个图像，然后将其即时转换为unicode，以便稍后显示。有人可以解释这是如何工作的吗？

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

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构建查找表感兴趣。对于将emoji字体添加到网页的问题，我的解决方案是添加字体，但是那不起作用： How to use an emoji font on a website?

我认为目前没有解决此问题的“适当”解决方案。

Edit2：

<!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>

在https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf的Chrome，Firefox和甚至IE上都可以很好地工作

签出： * https://efkah.github.io/playground/test * https://github.com/efkah/emoji-font-example

Answer 2

这个问题已经收到了相当多的观点，我认为正确的答案会很有用，因为我的 OP 是基于对表情符号世界的根本误解。

从广义上讲，有两种向用户输入添加表情符号功能的方法：

Unicode 字符，它依赖于开发人员导入的自定义字体OR 浏览器供应商的默认字体，以确定哪个版本的使用了特定的表情符号。 Check out unicode emojis here. 和 this post 详细说明了表情符号的 unicode 用法。
将图像插入富文本编辑器 (RTE)。此技术依赖于开发人员可以与 RTE 一起使用的单个表情符号图像（通常为 .png）或 sprite sheets . This article 是一个很好的起点。

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

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

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

如何在javascript中将表情符号图像转换为unicode或反映给定unicode的自定义表情符号

2 个答案: