Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

DataURI对更多MIME的支持

  抛弃掉IE6的兼容以后,DataURI已经可以在一些项目中使用了。之前的文章中有介绍过关于把图片的Base64做成DataURI的用法,但是DataURI可不止是Base64图片那么简单。只有IE对DataURI的支持依然停留在图片上,Chrome和Firefox中早就支持任意MIME了。
  IE直到10(11没测试)都无法兼容DataURI的非图片文件类型,所以下面只考虑Chrome和Firefox上的情况。
  DataURI的语法是 data:[<MIME-type>][;charset=<encoding>][;base64],<data>   可以视为两个部分,逗号左边的是各种参数,右边的是数据。左边的参数都是可选的,最简单的例子就是它们都为空,就像下面这样 data:,www.web-tinker.com   把这个粘贴到地址栏就可以在页面上看到逗号后面的data部分显示到了页面上(注意逗号是必须的)。

  添加个图片类型的MIME和相应的数据就可以使用图片了,但图片是二进制数据通常还需要使用MD5。这个在之前文章中有介绍这里就不举例了。图片之外的类型还有很多比如HTML
data:text/html;charset=utf-8,<b style="font:32px/32px 微软雅黑;color:red;">次碳酸钴</b>   由于这个HTML中包含中文,所以在逗号左边除了指定MIME外还要指定charset,要不然可能出现乱码

  它甚至SVG也支持,这意味着可以用SVG做网页的背景 html {
  background-image:url('data:image/svg+xml,<svg width="80" height="32" xmlns="http://www.w3.org/2000/svg"><text x="40" y="18" text-anchor="middle" dominant-baseline="middle" font-size="16px" font-family="微软雅黑" fill="%23CCC">次碳酸钴</text></svg>'); 
}


  参考:
    Wikipedia Data_URI_scheme
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^