码迷,mamicode.com
首页 > 其他好文 > 详细

base64和图片~

时间:2015-11-13 18:31:40      阅读:665      评论:0      收藏:0      [点我收藏+]

标签:

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生成二维码的组件来一个。

然后搞定了。。

 

 

base64和图片~

标签:

原文地址:http://www.cnblogs.com/hanyuxinting/p/4962827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!