图片base64编码利器:在线 Data URI 生成工具 – Duri.me-阿里云开发者社区

开发者社区> 阿里云SAP上云> 正文
登录阅读全文

图片base64编码利器:在线 Data URI 生成工具 – Duri.me

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

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

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

  

Data URI 简介

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

1
data:[<mediatype>][;base64],<data>

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

  下面是一些示例:

1
data:,Hello%2C%20World!

  简单的text/plain类型数据

1
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

  base64编码过的数据

1
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

  一个HTML文档源代码<h1>Hello, World</h1>

Firefox中生成data URI 的方法

  在 Firefox 浏览器中,将一个 nsIFile 转换为 data URI 的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
functiongenerateDataURI(file) {
varcontentType = Components.classes["@mozilla.org/mime;1"]
.getService(Components.interfaces.nsIMIMEService)
.getTypeFromFile(file);
varinputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
.createInstance(Components.interfaces.nsIFileInputStream);
inputStream.init(file, 0x01, 0600, 0);
varstream = Components.classes["@mozilla.org/binaryinputstream;1"]
.createInstance(Components.interfaces.nsIBinaryInputStream);
stream.setInputStream(inputStream);
varencoded = btoa(stream.readBytes(stream.available()));
return"data:"+ contentType + ";base64,"+ encoded;
}

常见问题和兼容性

  下文介绍一些在使用dataURIs 时遇到的常见问题:

  语法: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后面添加查询字符串会导致,查询字符串也一并被当作数据字段。例如:

1
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

  这个data URI代表的HTML源文件内容为:

1
lots of text...<p><a name="bottom">bottom</a>?arg=val

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

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: