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. [日常] gocron源码阅读-使用go mod管理依赖源码启动gocron

    从 Go1.11 开始,golang 官方支持了新的依赖管理工具go modgo mod download: 下载依赖的 module 到本地 cachego mod edit: 编辑 go.modg ...

  2. python pip 升级 或者换源

    1. 临时换源python -m pip install --upgrade pip -i https://pypi.douban.com/simple pip国内的一些镜像   阿里云  https ...

  3. AtCoder - 2282 (思维+构造)

    题意 https://vjudge.net/problem/AtCoder-2282 告诉你sx,sy,tx,ty,问从s走到t,再从t走到s,再从s走到t,再从t回到s的最短路,每次只能上下左右选一 ...

  4. 4. static修饰符

    一.static修饰符概述 1. static修饰的成员表明它属于这个类本身,而不属于该类的单个实例 把static修饰的成员变量和方法称为类变量.类方法 2. 不使用static修饰的成员则属于该类 ...

  5. adb <-> adbserver <-> JDWP

    简单理一下adb,adbserver,jdwp 之间的关系.角色与相关协议 |    上位机     | USB/TCP |   下位机      | adb <-> adbserver ...

  6. Python字符串内置方法使用及年龄游戏深入探究

    目录 作业 ==程序代码自上往下运行,建议自上而下的完成下列任务== 作业 使用代码实现以下业务逻辑: 写代码,有如下变量name = " aleX",请按照要求实现每个功能: 移 ...

  7. 2019 SDN上机第四次作业

    2019 SDN上机第4次作业 1. 解压安装OpenDayLight控制器(本次实验统一使用Beryllium版本) 修改环境变量 2. 启动并安装插件 3. 用Python脚本搭建如下拓扑,连接O ...

  8. Apex 企业设计模式

    FFLIB 是一个免费的框架,对 Apex 进行了扩展.它的结构实现了 Salesforce 推荐的Apex 企业设计模式. 在学习如何使用 FFLIB 框架之前,我们先来了解一下 Apex 企业设计 ...

  9. stm32配置led

    前言:我们学习一门新语言的时候都是先从hello world入门,stm32也有自己的入门方式,那就是流水灯的配置. 在配置之前我们需要先配置好编译环境,我们需要手动修改头文件中的一些内容. 1.首先 ...

  10. Comet OJ CCPC-Wannafly & Comet OJ 夏季欢乐赛(2019)

    Preface 在一个月黑风高的夜晚我这个蒟蒻正踌躇着打什么比赛好 是继续做一场AGC,还是去刷一场CF 然后,一道金光闪过(滑稽),我们的红太阳bzt给我指明了方向: 你太菜了,我知道有一场很水的比 ...