基于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/
基于emoji 国际通用表情在web上的输入与显示的记录的更多相关文章
- 基于吉日嘎底层架构的通用权限管理Web端UI更新:参考DTcms后台界面
经一周的研究学习,看了国内的H+.HUI等,国外的PaperDashboardPro.Make.Metronic BootStrap等,最终选定用一个轻量的,适合中国人的,来自DTcms的后台管理UI ...
- 基于Spring + Spring MVC + Mybatis 高性能web构建
基于Spring + Spring MVC + Mybatis 高性能web构建 一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJs,做了大量的研究,对前后端交互 ...
- 谈谈web上种图片应用的优缺点
web中承载信息的主要方式就是图片与文字了,以下就是对一些web图片格式的优缺点进行归纳. 1.GIF GIF图是比较古老的web图片格式之一,可以追溯到1987,几乎所有的浏览器都支持这一种格式,老 ...
- 如何基于Winform开发框架或混合框架基础上进行项目的快速开发
在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...
- 谈谈web上各种图片应用的优缺点
web中承载信息的主要方式就是图片与文字了,以下就是对一些web图片格式的优缺点进行归纳. 1.GIF GIF图是比较古老的web图片格式之一,可以追溯到1987,几乎所有的浏览器都支持这一种格式,老 ...
- Web上传文件的原理及实现
现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
- Java安全之基于Tomcat的通用回显链
Java安全之基于Tomcat的通用回显链 写在前面 首先看这篇文还是建议简单了解下Tomcat中的一些概念,不然看起来会比较吃力.其次是回顾下反射中有关Field类的一些操作. * Field[] ...
- 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
随机推荐
- wepy中页面的跳转
1.在pages中创建好页面之后,需要在app.wpy中的config中配置好页面路由:2.如果跳转的按钮在page页面中 this.$navigate({url:"content" ...
- js值类型与引用类型
JavaScript值类型和引用类型有哪些 (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 三.如何理解值类型和引用类型及举例 我们可以用“连锁店”和“ ...
- maven 介绍(zz )
Maven 编辑 目录 1简介 2特点 3常用命令 4推荐书籍 5Win7配置 6生命周期 1 1简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构 ...
- Selenium实战总结(webwiew下拉框定位)
基于常见的两种下拉框的展示形式: 1.点击弹出下拉框: 2.鼠标移动弹出下拉框(move_to_element) 实例一[鼠标点击弹出的下拉框]: e.g百度首页的设置--高级搜索--时间: 导包: ...
- Linux日志文件总管——logrotate
日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处理一个单个的庞大日 ...
- SpringMVC环境搭建和详解
1.Spring容器和SpringMVC容器是父子容器 1.1 SpringMVC容器可以调用Spring容器中的所有内容 1.2 图示 2.SpringMVC环境搭建 1.导入jar包 2.在web ...
- 41.App 框架的搭建思路以及代码的规范
本链接 引用别人文章https://www.jianshu.com/p/d553096914ff
- 2019.02.06 bzoj4503: 两个串(fft)
传送门 题意简述:给两个字符串s,ts,ts,t,ttt中可能有通配符,问ttt在sss出现的次数和所有位置. 思路:一道很熟悉的题,跟bzoj4259bzoj4259bzoj4259差不多的. 然后 ...
- 2018.12.31 bzoj4001: [TJOI2015]概率论(生成函数)
传送门 生成函数好题. 题意简述:求nnn个点的树的叶子数期望值. 思路: 考虑fnf_nfn表示nnn个节点的树的数量. 所以有递推式f0=1,fn=∑i=0n−1fifn−1−i(n>0) ...
- 2018.11.06 NOIP训练 最大获利(profit)(01分数规划+最大权闭合子图)
传送门 好题啊. ∑i<jpi,jK∗(200−K)>X\frac{\sum_{i<j}p_{i,j}}{K*(200-K)}>XK∗(200−K)∑i<jpi,j ...