C# Emoji在Web端显示

        关于emoji在web端显示问题,网上找了一遍,都不满意;最多的是mysql最简单,只需要更改数据库的字符集,把utf8改为utf8mb4,就可以直接显示;但我是用的Sql Server怎么办啦,继续在网上找资料,最后找到这个,说是把字段改为nvarchar,饭后存取的时候,直接编码解码;编码:System.Web.HttpUtility.UrlEncode(content, System.Text.Encoding.UTF8); 解码:System.Web.HttpUtility.UrlDecode(content, System.Text.Encoding.UTF8);用这种方法可以解决一部分问题,在win10上,用最新的谷歌或者火狐可以正常显示,但是在win7上显示却不正常,有些版本的浏览器同样是乱码,纠结。

        之后找了了emoji的js包,可以解决上面的问题,下载地址如下:Emoji包,使用方法,如下:

1.引入这三个包emoji-list-with-image.js   punycode.js   emoji.js 

    emoji-list-with-image.js 存储emoji编码和表情图片数据,格式如["e415","1f604","iVBORw0KGg..."]

    punycode.js 编码解析库

    emoji.js  解析emoji编码

2.具体使用

//解析存储的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图片输入 
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>';

            }
//.......
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值