Base64(二进制)图片编码解析及在各种浏览器的兼容(2)

日期：2020-06-08 栏目：程序人生浏览：次

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种情况

<html> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>base64图片兼容性测试</title> </head> <body> <div></div> <div></div> <div></div> <script type="text/javascript"> 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; </script> </body> </html>

执行效果

Base64(二进制)图片编码解析及在各种浏览器的兼容

转载注明出处：https://www.heiqu.com/wwgjwx.html

Base64(二进制)图片编码解析及在各种浏览器的兼容(2)

相关推荐