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.輸入表情字符----》👧 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.0和Emoji 12.1兼容性。有關此更新的更多信息。
https://emojipedia.org/apple/ios-13.2/
新版本IOS13.2收集了3175個表情符號
emoji 表情 根據分類 查看:
https://emojipedia.org/people/
是不是應該進行這樣的兼容?
公司很小,還是建議先做自己的表情圖片,大圖的這種
通過雪碧圖或者自己寫js實現,操作系統的emoji表情和Unicode這種方式圖片太多,自己整理起來是個體力活,勞民傷財,而且每隔一段時間就更新,其實很難整理的完整。上邊只是給的一種解決方法。實際上小公司人力根本達不到。
所以還是建議采用自己做圖片,向下面這種: