首页 > 代码库 > 基于emoji 国际通用表情在web上的输入与显示的记录
基于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="http://www.mamicode.com/‘ + data + ‘" unicode16="‘ + emo[1] + ‘" /></li>‘; }//.......}
至此主要emoji解析与反解析已得到处理
附上js库压缩包下载http://files.cnblogs.com/jtans/emoji-lib.zip
基于emoji 国际通用表情在web上的输入与显示的记录
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。