这篇文章介绍一款在线的图片 base64 编码利器 —Duri.me。data
URI 图片是 base64编码的图片文件，可以嵌入到 HTML 或者 CSS 文件中，能够减少 HTTP 请求，提高网页加载速速。
1
<code>data:[<mediatype>][;base64],<data></code>
<code> mediatype</code>是一种MIME类型字符串, 例如 "<code>image/jpeg</code>" 代表 JPEG 图像文件。如果省略这个参数，则默认值为<code>text/plain;charset=US-ASCII。</code>如果数据是文本类型,
你可以直接将文本嵌入在 data: 后面 （根据文本类型以及编码，使用合适的 HTML 实体编码或者百分号编码）。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。
下面是一些示例：
<code>data:,Hello%</code><code>2C</code><code>%20World!</code>
简单的text/plain类型数据
<code>data</code><code>:text</code><code>/plain;base64,SGVsbG8sIFdvcmxkIQ%</code><code>3D</code><code>%</code><code>3D</code>
base64编码过的数据
<code>data</code><code>:text</code><code>/html,%3Ch1%3EHello%</code><code>2C</code><code>%20World!%</code><code>3C</code><code>%2Fh1%</code><code>3E</code>
一个HTML文档源代码<code><h1>Hello, World</h1></code>
在 Firefox 浏览器中，将一个 nsIFile 转换为 data URI 的方法：
2
3
4
5
6
7
8
9
10
11
12
13
<code>function</code><code>generateDataURI(file) {</code>
<code></code><code>var</code><code>contentType = Components.classes[</code><code>"@mozilla.org/mime;1"</code><code>]</code>
<code></code><code>.getService(Components.interfaces.nsIMIMEService)</code>
<code></code><code>.getTypeFromFile(file);</code>
<code></code><code>var</code><code>inputStream = Components.classes[</code><code>"@mozilla.org/network/file-input-stream;1"</code><code>]</code>
<code></code><code>.createInstance(Components.interfaces.nsIFileInputStream);</code>
<code></code><code>inputStream.init(file, 0x01, 0600, 0);</code>
<code></code><code>var</code><code>stream = Components.classes[</code><code>"@mozilla.org/binaryinputstream;1"</code><code>]</code>
<code></code><code>.createInstance(Components.interfaces.nsIBinaryInputStream);</code>
<code></code><code>stream.setInputStream(inputStream);</code>
<code></code><code>var</code><code>encoded = btoa(stream.readBytes(stream.available()));</code>
<code></code><code>return</code><code>"data:"</code><code>+ contentType +</code><code>";base64,"</code><code>+ encoded;</code>
<code>}</code>
下文介绍一些在使用<code>data</code>URIs 时遇到的常见问题：
语法：data URIs 的格式很简单，但很容易会忘记了在 "data:" 协议名后面必须有一个逗号(MIME类型和"base64"都是可省略的)，或者在对数据进行 base64 编码时发生错误。
HTML代码格式化：一个data URI 是作为了一个文件内的文件，所以在嵌入其他文档的内部时，这个data URI 所在的行就会非常的长，所以应当用空白符（换行符、制表符、 空格）来对它进行格式化，但如果数据是经过base64编码过的,就可能会遇到一些问题。
长度限制：虽然 Mozilla 支持无限长度的 data URIs,但是标准中并没有规定浏览器必须支持无限长度的 data URIs。比如 Opera 11 限制 data URIs 的长度最多为 65000 个字符。
不支持查询字符串：一个 data URI 的数据字段是没有结束标记的，所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段。例如：
<code>data</code><code>:text</code><code>/html,lots of text...<p><a name%</code><code>3D</code><code>"bottom"</code><code>>bottom</a>?arg=val</code>
这个data URI代表的HTML源文件内容为：
<code>lots of text...<p><a name=</code><code>"bottom"</code><code>>bottom</a>?arg=val</code>
注意：从Firefox 6开始，data URI 中的锚点标记(#)会像在其他普通网页 URI 上一样可被识别,因此,如果想要表示文件内容中的 "#"，必须将它转义为'%23'。
浏览器兼容性：已经支持 data: 协议的浏览器有 Opera 7.20 及其以上版本，Safari 和 Konqueror。Internet Explorer 7 及以下版本不支持，Internet Explorer 8 及以上版本只支持在 CSS 文件中使用 data URIs 格式的图片。