这篇文章介绍一款在线的图片 base64 编码利器 — Duri.me。data URI 图片是 base64编码的图片文件，可以嵌入到 HTML 或者 CSS 文件中，能够减少 HTTP 请求，提高网页加载速速。

您可能还喜欢推荐8款很棒的测试网站速度的免费工具

10套精美的免费网站后台管理系统模板

开发者必备的8个最佳云端集成开发环境

十款精心挑选的在线CSS3代码生成工具

推荐8款优秀的免费 Web 安全测试工具

Duri.me 是一个简单但非常有用的 Web 应用程序，可以快速的在线生成图片文件的 data URI。Duri.me使用非常简单，把图片拖放到框内，然后点击 Generate Base-64 Code 按钮就会自动生成编码，Duri.me帮你生成了图片、CSS和Base64字符串三种形式的代码，可以根据自己的需要拷贝生成的内容。

Data URI 简介

dataURIs 是由 RFC 2397 定义，允许将一个小文件进行编码后嵌入到另外一个文档里。data URIs 的语法结构如下：data:[][;base64],

mediatype是一种MIME类型字符串, 例如 "image/jpeg" 代表 JPEG 图像文件。如果省略这个参数，则默认值为text/plain;charset=US-ASCII。如果数据是文本类型, 你可以直接将文本嵌入在 data: 后面 (根据文本类型以及编码，使用合适的 HTML 实体编码或者百分号编码)。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。

下面是一些示例：data:,Hello%2C%20World!

简单的text/plain类型数据data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

base64编码过的数据data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

一个HTML文档源代码

Hello, World

Firefox中生成 data URI 的方法

在 Firefox 浏览器中，将一个 nsIFile 转换为 data URI 的方法：function generateDataURI(file) { var contentType = Components.classes["@mozilla.org/mime;1"] .getService(Components.interfaces.nsIMIMEService) .getTypeFromFile(file); var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance(Components.interfaces.nsIFileInputStream); inputStream.init(file, 0x01, 0600, 0); var stream = Components.classes["@mozilla.org/binaryinputstream;1"] .createInstance(Components.interfaces.nsIBinaryInputStream); stream.setInputStream(inputStream); var encoded = btoa(stream.readBytes(stream.available())); return "data:" + contentType + ";base64," + encoded;}

常见问题和兼容性

下文介绍一些在使用 data 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后面添加查询字符串会导致,查询字符串也一并被当作数据字段。例如：data:text/html,lots of text...

bottom?arg=val

这个data URI代表的HTML源文件内容为：lots of text...

bottom?arg=val

注意：从Firefox 6开始，data URI 中的锚点标记(#)会像在其他普通网页 URI 上一样可被识别,因此,如果想要表示文件内容中的 "#"，必须将它转义为'%23'。

浏览器兼容性：已经支持 data: 协议的浏览器有 Opera 7.20 及其以上版本，Safari 和 Konqueror。Internet Explorer 7 及以下版本不支持，Internet Explorer 8 及以上版本只支持在 CSS 文件中使用 data URIs 格式的图片。

您可能还喜欢10套精美的免费网站后台管理系统模板

精心挑选的优秀 jQuery Ajax 分页插件

十款精心挑选的在线CSS3代码生成工具

让人爱不释手的13套精美网页图标素材

Web前沿：那些让人惊叹的CSS3应用

本文链接：图片base64编码利器：一款在线Data URI生成工具

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

转载请保留本文网址：

http://www.shaoqun.com/a/47501.html