data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取。这样从表面上看会减少一次HTTP的请求,实现了对于网页的优化(不过看了其他一些文章data URI因为将图片采用了base 64的编码方式进行表达,所以还是需要进行HTTP去下载内容,而且这样的渲染方式同时也加大了内存,cpu等等的压力,因此选择的时候需要进行性能方面的权衡)。
比如一张图片用http请求方式进行请求并且显示的方法:
<img src="http://sjolzy.cn/images/A.png"/>同样的效果使用 data URI scheme ,将图片转化为Base64编码方式后可以这样写进html中,很显然会减少一次请求的耗时
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
其中,data - 取得数据的协定名称;image/png - 数据类型名称;base64 - 数据的编码方法;iVBOR.... - 编码后的数据
对于图片的base 64编码后的获取方式,可以用 PHP 的 base64_encode() 进行编码,或者用canvas的toDataURL去获得。
var imgAsDataURL = imgCanvas.toDataURL("image/png");
data URI scheme及其应用,布布扣,bubuko.com
原文:http://blog.csdn.net/minedayu/article/details/25369581