基於emoji 國際通用表情在web上的輸入與顯示的記錄

定義：

　　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/