emoji表情多终端适配解决方案

emoji,也叫 颜表情 是日本在无线通信中所使用的视觉情感符号,由栗田穰崇(Shigetaka Kurita)创作,并在日本网络及手机用户中流行。自苹果公司发布的ios5输入法中加入了emoji后,这种表情符号开始席卷全球,普遍应用于各种手机短信和社交网络中。ios8.3中,加入了同性家庭、以及对不同肤色人种的职业展示。ios9.1中,苹果加入了很多新的有趣的表情。ios10.0中,将大部分表情重新设计,同时加入了单亲家庭的emoji。

emoji表情已经进入到我们的社交生活,大多数现代计算机系统已经兼容emoji表情。通过查阅相关资料,发现不同的设备对表情颜文字的展示效果不太一样。

怎么样让emoji表情在每个客户端都能展示,并且有展示的一致性呢?

方案是:将emoji表情改成图片的形式。

展示方案的逻辑如下:

(1)用户在设备中输入emoji

(2)获取用户输入的unicode编码(每一个emoji表情都是一个或几个unicode编码组成,跟文字一样)

(3)生成unicode编码对应的图片URL

(4)前台根据URL以及手机分辨率,展示表情图片

如何获取emoji表情对应的unicode码?

用手机扫描这个二维码,在输入框中输入emoji表情,可以查看到对应的HTML实体,在这里HTML实体可以近似看成unicode编码。

可以看到一些emoji表情并不是由单一的unicode码组成,而是有多个unicode码通过连接符号组成。

最新Emoji画像取得的方法

在ios9.1之后,有一个全新的网站 http://emojipedia.org/apple/可以在上面看到每个系统的高清表情图片。

每一个子表情页面,可以看到每个手机系统不同的设计,还有表情的最新unicode编码。

我们遍历每一个表情,下载图片和对应的unicode编码。

同时对所有表情的unicode编码进行排序。因为表情历史版本众多,所以取一个没有用过的id段,从400,000开始累加。

这样的我们生成一个表情unicode编码和图片id的对应表:

当用户输入emoji表情的时候,获取到unicode编码,再输出它对应的图片id,就可以在前端展示出来

例如:👧 这个unicode编码对应 从对应表可以查到它对应的图片id是e400459

http://qzonestyle.gtimg.cn/qzone/em/e400459@2x.gif生成这样的url给前台展示,并且针对二倍屏(高清屏)有高清图,对于pc有一倍图。

过程就是:  1.输入表情字符----》&#x1F467  2.转成Unicode字符  -----》e400459   3.查询对应的id   ------》http://qzonestyle.gtimg.cn/qzone/em/e400459@2x.gif 4.拼接图片URL。

总结:UTF8编码的Unicode格式不变,不同的设备显示不同的图片效果,为了能够让不同的设备兼容同一个效果,那么就需要将当前的设备的显示效果在此还原成UTF8编码的Unicode,在通过查找对应的id,找到自己的项目中对应的图片,拼装成URL展现在前端。

注意MySQL数据库的储存类型:utf8mb4  (真正的UTF-8) ,  Emoji表情符号为4个字节的字符,而 utf8 字符集只支持1-3个字节的字符,导致无法写入数据库。

MySQL的版本:utf8mb4的最低mysql版本支持版本为5.5.3+,若不是,请升级到较新版本。

看过一篇文章,是这么解释的,mysql的作者早期在设计是时候是声称支持UTF8,后来没有支持成功,自己觉得很尴尬,没好意思说,后来偷偷的升级到了utf8mb4,没敢公开以前的utf8是假的UTF8,其实现在的utf8mb4才是真正意义上的UTF8编码格式。不管是真是假,微微一笑得了。呵呵...

IOS 13.2于2019-10-28发行,增加了对性别中立选项的支持,人们以各种肤色握手,以及完全的Emoji 12.0Emoji 12.1兼容性。有关此更新的更多信息

https://emojipedia.org/apple/ios-13.2/

新版本IOS13.2收集了3175个表情符号

emoji 表情 根据分类 查看:

https://emojipedia.org/people/

是不是应该进行这样的兼容?

公司很小,还是建议先做自己的表情图片,大图的这种

通过雪碧图或者自己写js实现,操作系统的emoji表情和Unicode这种方式图片太多,自己整理起来是个体力活,劳民伤财,而且每隔一段时间就更新,其实很难整理的完整。上边只是给的一种解决方法。实际上小公司人力根本达不到。

所以还是建议采用自己做图片,向下面这种:

emoji表情多终端适配解决方案的更多相关文章

  1. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

  2. 手机自带输入法emoji表情的输入,提交及显示——纯前端解决方案

    很早之前就遇到过需要前端支持用户输入并提交emoji表情的问题,一直没有尝试去解决,今天再一次狭路相逢,该来的躲不过,那就着手解决吧. 大多数emoji表情都是4字节的utf-16编码(辅助平面字符, ...

  3. Xamarin截取/删除emoji表情bug解决方案

    大家都知道,一个英文=1字节,一个汉字2字节,而一个emoji表情=4个字节,在有这三种混用的时候,比如app聊天界面,那么删除和截取便成了很头痛的事情. 问题描述 截取导致乱码,如下图: 解决方案 ...

  4. 【MySQL】存储emoji表情报错(Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...')的解决方案

    Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符的支持却不是那么好.所以我们经常会遇到这样的异常:   Java.sql.SQLException: Inco ...

  5. 手机自带输入法emoji表情的输入,提交及显示——前端解决方案

    体验更优排版请移步原文:http://blog.kwin.wang/programming/emoji-transform-commit.html 之前就遇到过需要前端支持用户输入并提交emoji表情 ...

  6. java emoji表情存储解决方案

    1.问题产生情况 我遇到这个问题是做微信开发的时候有些有用的头像用了微信的emoji表情,然而我的mysql数据库用的编码是utf8_general_ci,就是utf-8编码,结果也就报错误了. 2. ...

  7. MySQL插入emoji表情报错 SQLException: Incorrect string value 的两种解决方案

    摘抄自:https://blog.csdn.net/dmw412724/article/details/81119325 原因:mysql的UTF-8只支持三个字节的存储,而一般字符是三个字节,但是e ...

  8. 移动前端手机输入法自带emoji表情字符处理

    今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符.既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下 ...

  9. 有关emoji表情以及utf-16编码

        昨日IOS组的同事遇到一个棘手的问题:当输入框内含有emoji表情时,如何获取文本框内的字符数(一个emoji表情算一个字符).       先从我最近接触的JAVA说起,JAVA中,在使用S ...

随机推荐

  1. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  2. C学习笔记(8)--- 文件读写

    1.C 文件读写: 一个文件,无论它是文本文件还是二进制文件,都是代表了一系列的字节.C 语言不仅提供了访问顶层的函数,也提供了底层(OS)调用来处理存储设备上的文件. a.打开文件: FILE *f ...

  3. Python入门基础学习(列表/元组/字典/集合)

    Python基础学习笔记(二) 列表list---[ ](打了激素的数组,可以放入混合类型) list1 = [1,2,'请多指教',0.5] 公共的功能: len(list1) #/获取元素 lis ...

  4. Ambari 大数据集群管理

    最近做了一个大数据项目,研究了下集群的搭建,现在将集群搭建整理的资料与大家分享一下!如有疑问可在评论区回复. 1前置配置 Centos7系统,每台系统都有java运行环境 全程使用root用户,避免安 ...

  5. 如何在类中根据枚举值,获取枚举的message的工具类

    枚举类为: public enum OrderStatusEnum implements CondeEnum{ NEW(0, "新订单"), FINISHED(1, "完 ...

  6. day2_窗口句柄切换

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/7/16 14:21 # @Author : 大坏男孩 # @File : d ...

  7. 2019 SDN上机第三次作业

    2019 SDN上机第三次作业 实验一 利用Mininet仿真平台构建如下图所示的网络拓扑,配置主机h1和h2的IP地址(h1:10.0.0.1,h2:10.0.0.2),测试两台主机之间的网络连通性 ...

  8. ASP.NET开发实战——(十)ASP.NET MVC 与数据库之MySQL&EF

    之前介绍EF时介绍了provider这个配置项,而且也介绍了在ASP.NET访问MySQL数据仍然是通过ADO.NET,不同的地方仅仅是更换了MySQL的数据提供器,那么在EF中是否也只需更换“提供器 ...

  9. Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法

    Win10安装 oracle11g 出现INS-13001环境不满足最低要求 首先,打开你的解压后的database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用note ...

  10. 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...