如何在 javascript 中将表情符号图像转换为 unicode，或反映给定 unicode 的自定义表情符号
[英]How to convert an emoji image to unicode in javascript, or reflect a custom emoji for a given unicode
问题描述
I'm trying to understand how to implement custom emojis for user input and I can't seem to get a handle on it.
我试图了解如何为用户输入实现自定义表情符号，但我似乎无法处理它。
I see that sites like Facebook initially show a list of small .png emoji images, then, once you click the image, it converts it to a unicode character.我看到像 Facebook 这样的网站最初会显示一个小的.png表情符号图像列表，然后，一旦您单击该图像，它就会将其转换为 unicode 字符。
Also, I've been digging through custom emoji packages that use sprite images.此外，我一直在挖掘使用精灵图像的自定义表情符号包。
I can't find any material that explains how to utilize a sprite, or a single image, then convert this to unicode on the fly to be displayed later.我找不到任何解释如何使用精灵或单个图像的材料，然后将其即时转换为 unicode 以供稍后显示。 Could someone explain how this works?有人可以解释这是如何工作的吗？
And if you can't convert images to unicode on the fly, how is it that different sites reflect their own custom version of an emoji with a given unicode character?如果您无法即时将图像转换为 unicode，那么不同的站点如何使用给定的 unicode 字符反映他们自己的 emoji 自定义版本？
2 个解决方案
解决方案1
1 2019-08-20 14:21:39
I would like to point to the OpenMoji Project for Inquiry: https://github.com/hfg-gmuend/openmoji我想指向OpenMoji项目进行查询： https : //github.com/hfg-gmuend/openmoji
In the data folder you will see neat look up files you can utilize.在数据文件夹中，您将看到可以使用的整洁查找文件。 Basically they save pngs with the name of the choresponding unicode character in their font, more advanced info is in the json:基本上，他们使用字体中对应的 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
}
Edit: Sorry, I thought you were interested in how to build lookup table with pngs.编辑：抱歉，我以为您对如何使用 png 构建查找表感兴趣。 My Solution for the problem of adding emoji-fonts to webpage would have been to add a font, but thats not working: How to use an emoji font on a website?我将表情符号字体添加到网页的问题的解决方案是添加字体，但这不起作用： 如何在网站上使用表情符号字体？
I dont think there is a "proper" solution to this problem currently.我认为目前没有针对此问题的“适当”解决方案。
Edit2:编辑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 😅 😇</span>
</body>
</head>
Works sweet with https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf on Chrome, Firefox and even IE.在 Chrome、Firefox 甚至 IE 上与https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf配合使用。
解决方案2
0 已采纳 2021-07-14 17:38:58
In lieu of the fair amount of views this question has received, I thought a proper answer would be useful, since my question was based on a fundamental misunderstanding of the emoji world.代替这个问题收到的大量观点，我认为正确的答案会很有用，因为我的问题是基于对表情符号世界的根本误解。
Broadly speaking, there are two methods for adding emoji functionality to user inputs:从广义上讲，有两种方法可以将表情符号功能添加到用户输入中：
- Unicode characters , which relies on a custom font imported by the developer OR the browser vendors default font, to determine which version of a particular emoji is used. Unicode 字符依赖于开发人员导入的自定义字体或浏览器供应商的默认字体，以确定使用哪个版本的特定表情符号。 You simply type in the unicode string and the browser inserts a given emoji based on the font.您只需输入 unicode 字符串，浏览器就会根据字体插入给定的表情符号。 Check out unicode emojis here.在此处查看 unicode 表情符号。 and also this post explains more about unicode usage for emojis. 这篇文章也解释了更多关于 emoji 的 unicode 用法。
- The insertion of images into a rich text editor (RTE).将图像插入富文本编辑器 (RTE)。 This technique relies on having single emoji images (typically .png) or sprite sheets that the developer can use with the RTE.此技术依赖于开发人员可以与 RTE 一起使用的单个表情符号图像（通常为 .png）或精灵表。 This article is a great place to start. 这篇文章是一个很好的起点。
The first method can be harder to customize the emoji unless you're into making custom fonts.
第一种方法可能更难自定义表情符号，除非您要制作自定义字体。 RTE plugins like TinyMCE are a simple and quick way to tinker with unicode emojis.像TinyMCE这样的 RTE 插件是修改 unicode 表情符号的一种简单快捷的方法。The second method becomes a bit more complex, and is used by some of the big players like Facebook and Twitter.
第二种方法变得有点复杂，并且被 Facebook 和 Twitter 等一些大玩家使用。 As with most things coding, with complexity comes flexibility.与大多数编码一样，复杂性带来了灵活性。 This method involves programmatically transposing some plain-text flag such as :smile:into an html element like<img src='smile.png' />.此方法涉及以编程方式将一些纯文本标志（例如:smile:转换为 html 元素，例如<img src='smile.png' />。 It creates a text area by utilizing thecontenteditable divtag.它通过使用contenteditable div标签创建一个文本区域。 Inside this div, the content is edited programmatically in order to add or remove emoji images, bold/italic letters, etc...在这个 div 中，内容以编程方式编辑，以添加或删除表情符号图像、粗体/斜体字母等...
In order to better understand how the second method works, I created react-ez-emoji , which is a lightweight, emoji-enabled contenteditable div that allows you to use any emoji image file you'd like.为了更好地理解第二种方法是如何工作的，我创建了react-ez-emoji ，这是一个轻量级的、启用了表情符号的contenteditable div ，它允许您使用任何您喜欢的表情符号图像文件。 It would be a good start for anyone looking to study the topic, but I don't recommend it for production.对于任何想要研究该主题的人来说，这将是一个好的开始，但我不建议将其用于生产。
This article does a good job explaining the limitations of unicode emojis, and why the second option is more customizable and efficient. 这篇文章很好地解释了 unicode 表情符号的局限性，以及为什么第二个选项更具可定制性和效率。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.