基於emoji 國際通用表情在web上的輸入與顯示的記錄
阿新 • • 發佈：2018-12-19
定義：
emoji 即國際通用表情
場景：
1，ios，android，wp上emoji表情輸入與顯示
2，web也需作為支撐平臺對emoji表情就行輸入與顯示（解析）
問題：
1，app端輸入的表情在web端顯示的是亂碼（比如方括號，問號，和實際編碼有關）
2，mysql 儲存emoji報異常（0xF0 0x9F 0x8F 0x8），此記錄不做問題處理，請參考http://blog.csdn.net/qdkfriend/article/details/7576524
解決：暫且對web顯示（問題1）的處理
所需js庫，按順序依賴
emoji-list-with-image.js 儲存emoji編碼和表情圖片資料，格式如["e415","1f604","iVBORw0KGg..."]
punycode.js 編碼解析庫
emoji.js 解析emoji編碼
示例用法
//解析儲存的emoji表情function parse(arg) { if (typeof ioNull !='undefined') { return ioNull.emoji.parse(arg); } return '';};
//反解析（web上，圖片資料轉為emoji字元編碼儲存）function decode(htmlStr) { //todo 正則替換效能更優？unicode16="1f603" if (typeof ioNull == 'undefined') {return ''; } var tempStr = htmlStr, unis = '', $imgs = $('<div>').append(htmlStr).find('img'); $.each($imgs , function (i, o) { var $img = $(o); var unicode16 = '0x' + $img.attr('unicode16'); //十六進位制 unicode16 = ioNull.emoji.decodeChar(unicode16); //unis += unicode16;tempStr = tempStr.replace($('<div>').append($img).html(), unicode16); }); //System.log(unis) return tempStr;};
emoji.js 提供了getEmojiList 方法，獲取所有類別的emoji陣列集合，其中單項格式為[0: "e415",1: "1f604",2: "emoji對應的base64圖片資料"]
//示例生成emoji圖片輸入 function renderEmoji(){var emos = getEmojiList()[0];//此處按需是否生成所有emoji var html = '<div >常用表情</div><ul>'; for (var j = 0; j < emos.length; j++) { var emo = emos[j]; var data = 'data:image/png;base64,' + emo[2]; if (j % 20 == 0) { html += '<li class="">'; } else { html += '<li>'; } html += '<img style="display: inline;vertical-align: middle;" src="' + data + '" unicode16="' + emo[1] + '" /></li>'; }//.......}
表情輸入示例圖
至此主要emoji解析與反解析已得到處理
附上js庫壓縮包下載http://files.cnblogs.com/jtans/emoji-lib.zip，
參考網址 http://www.iemoji.com/