Base64编码的img，慎用

Base64编码的img介绍

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

 

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

 

<img src="data:image/png;base64,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" 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
AAAAAAAAAAAA////ALx8TgBSRD4AuLa4AIaBhgA+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个字符，超过最大长度后无法提交。