这篇文章介绍一款在线的图片 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 的语法结构如下:
1
|
data:[<mediatype>][;base64],<data>
|
mediatype
是一种MIME类型字符串, 例如 "image/jpeg
" 代表 JPEG 图像文件。如果省略这个参数,则默认值为text/plain;charset=US-ASCII。
如果数据是文本类型,
你可以直接将文本嵌入在 data: 后面 (根据文本类型以及编码,使用合适的 HTML 实体编码或者百分号编码)。如果是二进制数据,你可以将数据进行 base64 编码之后再进行嵌入。
下面是一些示例:
简单的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
|
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后面添加查询字符串会导致,查询字符串也一并被当作数据字段。例如:
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 格式的图片。
分享到:
相关推荐
操作系统期末复习笔记
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
香港某银行--CRYPTO业务资料
模拟退火算法解决TSP旅行商问题
局域网组建与维护大作业.zip
给外系统提供三大报表数据取数方法,也可以整理成接口进行提供,进行过验证取数
mmexport1718269273275.jpg
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
基于C语言自制编程语言
Adapter Tuning.pdf
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
香港某银行卡产品介绍资料
资源包括: 1.Java爬虫实战代码 2.selenium学习笔记 3.代码演示视频 4.谷歌浏览器chrom121.0.6134.0 chrome-linux64.zip chrome-mac-arm64.zip chrome-mac-x64.zip chrome-win32.zip chrome-win64.zip 5.谷歌浏览器驱动器Chromedriver121.0.6134.0 chromedriver-linux64.zip chromedriver-mac-arm64.zip chromedriver-mac-x64.zip chromedriver-win32.zip chromedriver-win64.zip 特别说明:Chrome 为测试版(不会自动更新) 仅适用于自动测试。若要进行常规浏览,请使用可自动更新的标准版 Chrome。)
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
电气工程及其自动化专业电力电子方向的同学可以学习了解一下,该篇文章解释了在逆变电路中所涉及的调制度的概念,由于课本上对该部分解释较少,一笔带过。导致大家对这个概念理解不够深刻,甚至不知道这个东西。该文档很好的解释了调制度这个概念以及电压利用率这一概念,通过公式可以具体计算出逆变电路的调制度和电压利用率。使用于单相逆变电路和三相逆变电路。有不对的地方也希望大家批评指正。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。