Base64编码的img，慎用

Base64编码的img介绍

在程序中用到了 xheditor 这个超文本编辑器，它在 FF/Chrome 下支持粘贴(Ctrl+V)剪贴板上的图片，但在 IE/Opera/Safari 下不行。

 

粘贴的图片，与我们平常的不一样，如下所示：

 

<img src="https://img-blog.csdnimg.cn/2022010708532443812.png" alt="眼睛" />

 

 

显示效果如下：

 

这就是所谓的 inline base64 image，经过测试发现它在 FF/Chrome/Opera/Safari/IE8/IE9 下正常显示，在 IE6/IE7 下不能显示。

 

下面是这种嵌入的图片数据格式简要说明：

 

data: URI定义于IETF标准的RFC 2397 

data: URI的基本使用格式如下： 

data:[<MIME-type>][;base64|charset=some_charset],<data> 

mime-type是嵌入数据的mime类型，比如png图片就是image/png。 

如果后面跟base64，说明后面的data是采用base64方式进行编码的 

 

 

对于 IE6/IE7 下不能显示这种嵌入图片的情况，下面的网站给出了一个用js+后台的解决方法：

http://dean.edwards.name/weblog/2005/06/base64-ie/

 

下面是我参考之后做的一个测试，发现 img.src 的如果太长的话，在 IE6/IE7 下就会出错，因为超过了 IE6/IE7 的最大 URL 长度，大约 2K（Maximum URL length is 2,083 characters in Internet Explorer 在IE中URL最大长度是2083字节）。因此这种方法不能解决所有的问题，谁能保证图片就这么小。

 

下面的代码，保存到 test.html 中，然后就可以在各个浏览器中正常显示了（但是如果换成上面的 img 代码就不行了）。

 

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAQAEAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAALx8TgBSRD4AuLa4AIaBhgA+FQUAjlAtAN7a2gB5ZF4AtZ+MACIgJgBfLRYA
zZNwAJ50YQCmZj4AQSskAG1BKwCqh3gA1LmqAM7GyADy6+oAoJ6hABwTDABfWV0AgVhGADo5OgBp
TUUAy4paAJmQkAAzHBcAf3JuAJV9cgB8TDQAVE5SALejngCve2MAqHNSAMm8uADDsKwAUi8hALRx
RQCqlJAA287MAPr09QC+hWEAmIOAAOTj5QCKY0wAsKywAGxZVgCUWTcAs4htAD8jFgBXJg0AeFtQ
AGA+KwCBenwAe0coADUnJwDBopAAcEk4AIdVOwDCwMIATygXAI6KjwA0MDQAq6KlALCQfgB1aWgA
lnpnAKmbmwBeT00AW0pAANDOzwDW1NYAhnNmACwjIwDHtKMA8PDzAEhCQACrbEUAinp3AKZ4XAA5
Fw0AZVVRAJ+OiQCilpQAQzo6AGhJPADFtbMAazwkAMWKYwCib00A6ujpAJiKhgC8vLwArXVZAMWU
cABuX1sARCkdALuysgA6LCoAfmlhAGZbWwCITCsAtI54AMG6twCwoZ4A/vr6AMfDxgDg3eAA3dTX
ALl7VABqQTEAp6CgAJOMigCaclwATj89AMjBwAC4dUgAh3x8AO7s7wDZ0tAAsrC0AJWSlACFcGsA
xry9AL61twCtmI0AeWhkAMWGXwBUKRUAz8zKALaxsACdlZIAzMPEAMeyqQB1ZmEA+fn5AMC0sgA4
HRcAfVlJAKaTjQD19PUApZmZAJJ4aQApJiUA1NHTANLHygDIxcoAal1XAKt9YgDx7+4ARSYaAHlL
MQDXzcsAu7i7AH1QNQC1s7QAmI2JAPj28gDs6uwAq5WLAP38/QDi3N0AMzM2AMW+wADIv7oAqp6d
AKWVkgCNeXUA0s7MALmytQCQjJEA2s/RANjMzgDRxccAvLm+ALyxrwCJgoUAsbCxAH5oXgCCcWsA
9/f4AO7s6wDe3t4A3NjZAM/MzQDEwcQAxry6AJd7cQDOxMYAvry+AHtqZACai4kANTIzANrRzgDI
xccAqqSkAPHw8QDT0dEAwLW4AK1rRQB7ZF8AnZOSAP7+/gD9+/sA+fX2AKmfngD+/f0A4dvdAG1A
KgCyr7EAk3dpAOzq6wDp6OkAz8zOAMbDxgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAjBkhET0qwAGkxpTZ2kvTr3tyDDYGjavQncGulrJvlbG5G0CEVCh1K3pK1UExva2wz8yaZB4+
DSB8L8lgBD+AsM5SEGZC1MsOaAVu17yfc2XOHU3EWFsHJL+RQ6cUynnHzhYLpkkzD2ESkid/iEcu
nM61GpM4KRwtmFPWObTDCRXOfVAXnngCXCWbMFUiY4rSyBg7NTppUYNxXU6pRQOHAdh2WTyJo0Rq
NGIKdIJIuwGQMo4TLAEBAQGhI6p+zQEBzr43gSalXqK4T3BXwpkBAc4B0WePWmyzhmtfH4UBAQHO
AQHFVrdMRraXoG0BAQEBAc7OzosIrKh3us7Ozs7OzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" height="16" width="16" border="0">
<script type="text/javascript">
//alert(navigator.userAgent);
if (/MSIE [67]/.test(navigator.userAgent)) {
	//alert("sss");
  	// a regular expression to test for Base64 data
	var BASE64_DATA = /^data:.*;base64/i;
	// path to the PHP module that will decode the encoded data
	var base64Path = "http://dean.edwards.name/my/base64.php";
	function fixBase64(img) {
		// check the image src
		//alert(img.src);	// IE6: 错误：无效指针
		//alert(img.getAttribute("src"));	// IE6: 错误：无效指针
		try {
			if (BASE64_DATA.test(img.src)) {
				// pass the data to the PHP routine
				//alert("xxx");
				img.src = base64Path + "?" + img.src.slice(5);
			}
		} catch (ex) {
			alert("内嵌图片可能太大了，无法显示");
		}
	};
	// fix images on page load
	onload = function() {
		//alert("onload "+document.images.length);
		for (var i = 0; i < document.images.length; i++) {
			fixBase64(document.images[i]);
		}
	};
}
</script>

 

上面这个解决方法肯定是不完美的。还有人提出了一种更完美的方案。就是用一堆 JS 去解码 base64 的数据、然后对图像处理、去生成图片。这种方式好繁琐。

 

个人观点：

在目前情况下，在互联网中 IE6 还占有相当大的份额的情况， base64 image 最好还是不用的好；但是在移动互联网中，大部分浏览器都支持 html5，可以尝试使用。因此，如果碰到在超文本编辑器中提交的图片是 base64 格式的，那么就应该进行处理，提取出该数据(img.src)，然后 base64 解码，保存成对应的图片，并将 img.src 设置成文件。

 

参考资料：

 

在浏览器中解析Base64编码图像

http://hi.baidu.com/sonan/blog/item/54ab0a4f690e1025aec3ab86.html

 

BASE64编码的图片在网页中的显示问题的解决

http://staratsky.iteye.com/blog/314651

 

Base64 Encoded Images for Internet Explorer

http://dean.edwards.name/weblog/2005/06/base64-ie/

http://dean.edwards.name/my/base64-sordid.html

http://dean.edwards.name/my/base64-sexy.html

 

HTTP Get请求URL最大长度

http://www.4ucode.com/Study/Topic/1080587

 

IE6.0                :url最大长度2083个字符，超过最大长度后无法提交。

IE7.0                :url最大长度2083个字符，超过最大长度后仍然能提交，但是只能传过去2083个字符。

firefox 3.0.3     :url最大长度7764个字符，超过最大长度后无法提交。

Opera 9.52       :url最大长度7648个字符，超过最大长度后无法提交。

Google Chrome 2.0.168   :url最大长度7713个字符，超过最大长度后无法提交。