base64和图片~

base64，可以识别为Data URI scheme 类型的一种。

Data URI scheme可以识别的类型有几种，如下：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

图片+base64是快速加载图片的一种方式，从后端传输过来也省很多字节。

不过，IE6、IE7是不支持这种方式的。

写法如下：

<img src="data:image/png;base64,XADFASDFASDFASDX">
 

XADFASDFASDFASDX 暂且让这一堆代表一张图片的的base64编码。


这个东西其实很老了。今天拿出来是因为我遇到了兼容性问题，并且决定更要搞明白。。但是我找了几种方式，都是跟MHTML相关的。

 

 1 <!--
 2 Content-Type: multipart/related; boundary="=_data-uri"
 3 -->
 4 <!DOCTYPE html>
 5 <html>
 6 <head>
 7 <style type="text/css">
 8 #pic {
 9 width:670px;height:710px;
10 background-image: expression("url(mhtml:" + window.location + "!locoloco)");
11 }
12 </style>
13 </head>
14 <body> 
15 
16 <div id="pic" ></div>
17 <div id=test style="display: none;">
18 
19 --=_data-uri
20 Content-Location:locoloco
21 Content-Transfer-Encoding:base64
22 
23 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8  /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
24 --=_data-uri--
25 
26 </div>
27 </body>
28 </html>
View Code

 

这个是一个很hack的方式了，不建议这么搞，还有就是异步请求回来的数据，这么搞感觉也很不好玩。

如果不能兼容，只能另想他法。

 

因为要搞的图片是一张二维码，所以重新约定接口，由js直接生成二维码。于是引起其他问题。js生成二维码的组件来一个。

然后搞定了。。

 

 

posted on 2015-11-13 17:41  hanyuxinting  阅读(310)  评论(0)  编辑  收藏  举报

导航