Base64图片编码解析及在各种浏览器兼容性处理的示例分析

小编给大家分享一下Base64图片编码解析及在各种浏览器兼容性处理的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、成都做网站、新华网络推广、重庆小程序开发、新华网络营销、新华企业策划、新华品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供新华建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com

IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge。base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE浏览器都能正常显示,所以显得IE浏览器比较low。那么兼容性究竟应该怎么来处理呢? 分三种情况。

(1)IE9+、Firefox、Chrome、Safari等浏览器

base64图片在HTML里的标准写法是:

(3)IE8浏览器

ie8浏览器分两种情况。一种是在XP下ie6升级到ie8,另一种是Win7自带的ie8。两者的区别是XP下的ie8不支持javascript直接将backgroundImage赋值为base64值。但是Win7下是可以的。

 如何兼容

在代码上我们使用UserAgent里的Trident和Windows NT版本来确认ie8在何种情况使用:

A.当NT版本是NT 5.x并且Trident没现出现的时候,判定为xp下的ie6和ie7,执行第2种情况;

B.当NT版本是NT 5.x并且Trident 4.0的时候,判定为xp下的ie8,执行第2种情况;

C.当NT版本是NT 6.x时,为win7、win8、win10系统,执行第1种情况;

D.都不是时,就是非IE流览器,执行第1种情况






base64图片兼容性测试


function setImage(obj) { // for ie6、ie7、ie8 if (!/Trident/.test(navigator.userAgent) && /MSIE [6-8]\.0.*Windows NT 5\./.test(navigator.userAgent)) return ""; //for ie9 or later、FireFox 、chrome 、Opera var html = document.firstChild.nodeValue; var reg = new RegExp("--imagedata\\s*[\\r\\n]+Content-Type:\\s*(image\\/\\w+)\s*[\\r\\n\\s]+Content-Location:\\s*" + obj + "\\s*Content-Transfer-Encoding:\\s*base64\\s*[\\r\\n\\s]+([a-zA-Z0-9\\/\\+\\r\\n=]+)", "g"); var codePart = reg.exec(html); document.getElementById(obj).style.backgroundImage = "url(data:" + codePart[1] + ";base64," + codePart[2] + ")"; } setImage("showimg"); setImage("img2"); document.getElementById("useragent").innerHTML = navigator.userAgent;

执行效果

Base64图片编码解析及在各种浏览器兼容性处理的示例分析

以上是“Base64图片编码解析及在各种浏览器兼容性处理的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页名称:Base64图片编码解析及在各种浏览器兼容性处理的示例分析
文章网址:http://azwzsj.com/article/jpsiec.html

其他资讯