emoji表情多終端適配解決方案


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這種方式圖片太多,自己整理起來是個體力活,勞民傷財,而且每隔一段時間就更新,其實很難整理的完整。上邊只是給的一種解決方法。實際上小公司人力根本達不到。

所以還是建議采用自己做圖片,向下面這種:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM