浏览器支持data URI协议

一般浏览器引用资源时,都是用http和https协议,部分浏览器和所有的ftp软件都会使用ftp协议,引用本地文件会使用file协议,此外还有mms、thunder等各种协议。
不过刚才突然发现Firefox、Chrome和Opera等浏览器还支持data URI协议(IE 6不支持),格式非常简单:

data:资源类型;编码,内容

简单来说,要生成一个html资源,可以这样:

data:text/html;ascii,<html><title>hello</title><body>world</body></html>

你把上面的链接复制到浏览器地址栏,打开就能看到效果了。

而2进制文件,例如图像、视频和音乐一般是使用base64编码,这会导致体积增大1/3。
例如要显示一个8×8像素的全黑图片,可以这样:

data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==

实际上它还可以作为img等元素的src属性,如果你用支持data协议的浏览器的话,应该可以看到一张图:

如果看不到图的话,赶紧抛弃你那丢人的浏览器吧。

不得不提的是,我觉得它并不合适常规应用,因为存在几个严重问题:

  1. base64编码会增大1/3体积,占用更多带宽。
  2. 浏览器解析时,会消耗更多的CPU资源,并可能占用更多内存。(这个和浏览器的实现有关,不过至少得多一次base64解码。)
  3. 无法让浏览器缓存图像,只能缓存引用它的文件。
  4. 在HTML上不能复用,要复用只能放在CSS和JavaScript里。
  5. 如果把背景图片写在CSS或JavaScript里,在下载完CSS和JavaScript之前,浏览器是完全停止解析和渲染的,而常规的引用外部图片的方式是可以并行下载的。

但是如果用来生成缩略图却不错,因为不需要在服务器端生成和维护一张临时图片。

最后说下如何用Python生成data URI协议的链接:

 
 
  1. <code data-result="[object Object]">import base64
  2. img = open('kirino.jpg', 'rb') # 打开你要转换的图,文件名自己改
  3. content = img.read() # 读取内容
  4. out = open('result.txt', 'wb') # 打开输出文件,文件名自己改
  5. out.write('data:image/jpeg;base64,') # 输出头部,MIME类型自己改
  6. out.write(base64.b64encode(content)) # 输出base64编码后的文件内容</code>

然后打开result.txt,里面就是结果了=。=

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值