emoji表情存储在MySQL中读取到网页中显示为灰色轮廓转换为原本彩色emoji表情解决方案

最近在做小程序后端开发的时候，发现从小程序获取到的用户nickname如果存在emoji表情存储在MySQL中读取到网页中显示为灰色轮廓了？？原本彩色的emoji表情全部都只能显示灰色轮廓。包括腾讯官方网页和开发者工具中也是如此，如下图所示：

后来在网上查阅了一番找到了一位大神写的js插件，很友好地将从数据库读取出来的emoji表情在js中转换为彩色的emoji表情包。至于表情包替换的全不全还有待实际使用过程中验证，顺便贴上大神分享的github源码地址：https://github.com/coocy/emoji ，为了方便大家下载（GitHub无论哪个项目个人觉得每次打开很慢？），所需的emoji.js及emoji表情包下载地址：https://download.csdn.net/download/jam00/10646967 CSDN不能设置免积分下载？？感谢大神无私分享。（侵删）

当然程序员从来不重复造轮子，但是得懂别人造轮子的原理，查看了一下这个js插件的源码，发现它是将彩色的emoji表情包放在一个文件夹中，通过js将数据库读取出的emoji表情包Unicode编码传入，然后根据emoji编码转换成utf-32编码去表情包文件夹中按照编码查找命名为该值的emoji图片，再通过js将emoji表情通过img标签引入替换显示原本的只有灰色轮廓的emoji表情。

使用方法： 拷贝大神分享在github上下载来的emoji.js和emoji文件夹到你的项目中。

举个我项目中的例子：js通过for循环将用户信息循环输出显示到table列表里

for(var i=0;i<items.length;i++){
   var tbBody = "";
   tbBody += "<tr><td>"+items[i].openId+"</td><td><img style='height: auto;width: 50px;' src="+items[i].avatarUrl+" /></td><td id='nick_name"+i+"'>"+items[i].nickName+"</td><td>"+items[i].gender+"</td>\n" +
       "<td>"+items[i].country+"</td><td>"+items[i].provice+"</td><td>"+items[i].city+"</td><td>"+Cdates[i]+"</td><td>"+Udates[i]+"</td>\n" +
       "<td><a href='javascript:void(0)' onclick='showWxUser(\""+items[i].openId+"\")'>查看详情</a></td></tr>";
   $("#items-table").append(tbBody);
   Emoji.emoji(document.getElementById('nick_name'+i+''));
}

在微信昵称的< td >标签给一个id，通过获取这个id的文本值将其递交给emoji函数处理替换成html代码段就可以正常显示emoji彩色表情了。

emoji js插件替换图片的关键代码如下：

text = text.replace(Emoji.reg, function(code) {
			return '<img width=' + fontSize + ' class="emoji" style="vertical-align:middle" src="' + Emoji.emojiPath + Emoji._escapeToUtf32(code) + '.png">';

转换效果如下所示：

通过浏览器检查元素可以发现，原本的字符被替换成了html代码，将emoji表情通过img标签显示出来了，如下图所示：

在实际开发过程中，我们可以根据自己的需求来改动这个emoji.js插件，使得更符合我们的需求。有兴趣的朋友可以去下载大神github上的源码下来研究研究。