阿坝州网站建设公司

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

其他资讯