开发者社区> 秋天风景> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

图片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 简介

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

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

  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文档源代码 <h1>Hello, World</h1>

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...<p><a name%3D"bottom">bottom</a>?arg=val

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

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 格式的图片。

您可能还喜欢

 

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

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

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

相关文章
VS2010编译生成lib库Release版本比Debug版本大的原因
最近在visual studio2010和2019生成Windows的lib库的时候发现Release版本的lib比Debug版本要大
31 0
Python:data:image/png;base64图片编码解码
Python:data:image/png;base64图片编码解码
252 0
Rosalind工具库: Entrez搜索NCBI资源库
Introduction to Protein Databases 蛋白质数据库中心UniProt提供了蛋白详细的注释,如功能描述,功能与结构,翻译后修饰。
1246 0
Docker技术的特性可以为IT团队带来什么价值?睿云智合(Wise2C)浅解
技术作为目前IT行业应用打包以及流程标准化的趋势技术,是IT团队提高响应速度与交付能力的基础。Docker技术的特性可以为IT团队带来怎样的价值呢?睿云智合(Wise2C)作为容器技术的领先者为你解开Docker技术所带来的价值。
1181 0
浅析用Base64编码的图片优化网页加载速度
  想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片。如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起,这样在打开页面的时候只需要一次http请求就可以加载多张图片,然后通过设置图片的背景偏移量来正确的显示。
1694 0
C# 加密解密(DES,3DES,MD5,Base64) 类
原文:C# 加密解密(DES,3DES,MD5,Base64) 类 保存! public sealed class EncryptUtils { #region Base64加密解密 /// /// Base64加密 ...
1080 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载