img标签中src包含data URL scheme-在一个URL中包含图片数据

你可以把一个Url链接看作一个数据，允许输入任何量的数据。这些数据可以是一张图片、asii文本、xml数据。用法如下： URI定义于IETF标准的RFC 239

你可以把一个Url链接看作一个“数据”，允许输入任何量的数据。这些数据可以是一张图片、asii文本、xml数据。用法如下：
 

data:image/jpeg;base64,base_64_encoded_jpeg_goes_here

data: URI定义于IETF标准的RFC 2397 。RFC 制定于1998年，已经不新了。但是对我来说，它是全新的，它使我重新思考各种类型的有趣的应用，特别是用在标准浏览器上。你能做以下事情：

基于javascript的图片编辑
在一个网页或者博客条目中存储附件（简化文件组织）
递交一个图片或者文件到允许 Url递交的论坛
使附件通过email的过滤
 

这些只是初步想法，你可以有其它更好的用途。

例子：编码在一个数据URL中的图片：

显示的效果如下（IE6下无效）：(下面这个图片不是什么XXOO.jpg图片哦，右键图片属性看看是什么)


或者把data：内容复制到地址栏回车（IE下无效，但Firefox下有效）

 

 

 

 

这种 The "data" URL 的格式如下：

data:[参数][;base64],

参数为互联网媒体类型(标准的有image/jpeg image/gif image/png text/html text/plain等类型)；

表达式;base64意思是数据基于base64位编码（生成的文件比一个文件的二进制格式大33%），没有这项数据是ASCII编码（生成的文件比一个文件的二进制格式大200%），数据在安全的URL自负和标准的16进制编码范围内。

参数没有的话，默认为：text/plain;charset=US-ASCII，text/plain可以省略，但是参数charset一定要有。

The "data:" URL一般只对短的数据有用。一些应用对urls有长度限制，例如：在html中的＜a＞标签中的链接就有由SGML颁布的HTML标准所规定的长度限制。长度为：最多1024个字符出现在一个标记中。一个属性值尤其是tag的属性值最大不超过2100个字符。
The "data" URL没有相对的URL形式。

句法：
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

这个方法可以用在小图片上，大图片就不行了。对于用防火墙过滤某种类型文件的站点，用这个方法，它就很难过滤这种格式的文件了。

这里有一个在线把一个链接中的图片或者上传的图片转化成数据的网站:Link.

以上译自：Embed image data inside a URL

注意：firefox浏览器和Opera浏览器支持"data" URL格式，而Internet Explorer6对此不支持。

数据url的其中一个优点是图像会随代码一起导入，而不用与服务器进行另外一个交互，也不占用文件头部的流量。（另外一个优点，可以将您所有的CSS、JavaScript、HTML和图像封装成一个文件，以使得其更加方便携带到其他的方法），该方法的缺点有是这样导入的图像不会被缓存，并且如果编码一个很大的图像的话，编码URL将会非常长。

基于同样原理：

firefox浏览器和Opera浏览器都可以在地址栏输入下面的字符串，回车，生成一个 hi!!的页面：
data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHk+aGkhISEhPC9ib2R5PjwvaHRtbD4=


Mozilla对这种url的测试页面：http://www-archive.mozilla.org/quality/networking/testing/datatests.html

MDN教程：https://developer.mozilla.org/en/data_URIs

  

相关文章：《data URL浅谈》