Data URI
是由RFC 2397
定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:
data:[<MIME-type>][;base64],<data>
- MIME-type:指定嵌入数据的MIME
。其形式是
[type]/[subtype]; parameter
,比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息,更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
- base64:声明后面的数据的编码是base64
的,否则数据必须要用百分号编码(即对内容进行urlencode)。
ie8 只支持object(仅是图片时)、img、input type=image、link和CSS中的URL,且数据量不能大于32K。
例子:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ8AAAAnCAYAAAARgpr4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAQ1JREFUeF7t3DEKwkAUBNAcQMgZbHP/Y3ggK1eF9DGwE6d4Qrrwhdn5L90ui58EJCABCUhAAv9IYNvuz8//Do8MZnZg79VhpccYD48MpnZgL7LyWa7rcVE+mk3V7MwSK5/yKd+ZjfHu9Z/IRObkIx/5EptlZreQ5CMf+SjVrVTifMhHPvIlNsvMbk3JRz7yUapbqcT5kI985EtslpndmpKPfOSjVLdSifMhH/nIl9gsM7s1JR/5yEepbqUS50M+8pEvsVlmdmtKPvKRj1LdSiXOh3zkI19is8zs1pR85CMfpbqVSpzPT/Kt6+0183Yis9x29e3A3qvDi4K8IAEJSEACEpCABCQgAQlIYFoCb+BJTz/kawFFAAAAAElFTkSuQmCC
分享到:
相关推荐
本文将深入探讨如何在dataURI中正确使用SVG,以实现高效、灵活的Web图形展示。 首先,了解dataURI的基本原理。dataURI是一种URL scheme,它允许在单一的URL内直接包含文件内容。其基本格式如下: ``` data:[][;...
例如,`data:image/png`表示该Data URI包含PNG格式的图像数据。 ##### 可选参数 可选参数用于进一步定义Data URI的行为或特性。主要包括以下两种: - **字符集**:指定Data URI中的字符编码。默认情况下,Data URI...
Data URI Scheme是一种URI(统一资源标识符)方案,它允许在单个URI中包含资源的数据,而不是提供指向资源的地址。其基本格式如下: ```text data:[][;base64],<data> ``` 其中,`<mediatype>`是资源的MIME类型,...
Go语言提供了一个名为Go-SVGdatauri的工具,专门用于将SVG图标转换为data URI格式,以便于在CSS中直接引用。 data URI是一种在Web内容中嵌入资源的方式,它允许将图片、字体等数据编码为Base64字符串,并直接放在...
3. 将base64字符串拼接成datauri格式。 首先,使用Node.js的内置模块fs(文件系统)读取本地图片文件。通过`fs.readFileSync`方法可以同步地读取文件,该方法会返回文件的二进制数据。例如: ```javascript var fs ...
`python_datauri`是一个这样的库,专为处理Data URI(数据URI)而设计。Data URI是一种在Web开发中用于内联嵌入小文件的机制,它可以将图像、文本等数据直接编码到HTML或CSS中,从而减少HTTP请求,提高页面加载速度...
模组npm i --save datauri命令行界面npm i -g datauri-cli使用datauri的工具NPM脚本古尔一个插件,用于将图像转换为嵌入式数据URI。 旨在用作的简单单一用途包装器。RUN 在datauri模块的顶部运行着许多grunt插件。 ...
>> > from datauri import DataURI >> > uri = DataURI ( [removed]VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wZWQgb3ZlciB0aGUgbGF6eSBkb2cu' ) >> > uri . mimetype 'text/plain' >> > uri . charset 'utf-8' >> > uri . ...
同时,可以使用自动化工具在发布阶段将图片转换为Data URI或MHTML格式,这样可以在保持代码简洁的同时提高页面加载效率。 总结来说,Data URI和MHTML是优化Web性能的两种策略,各有优劣。Data URI适用于减少HTTP...
iconfont到datauri 用于将iconfont网站上的项目字体转为内嵌样式可用的datauri编码 支持语言:中文 (简体)
将图像编码为DataURI。 安装 通过凉亭安装。 $ bower install 1000ch/image-encoder 用法 var ie = new ImageEncoder ( 'path/to/image.png' ) ; ie . getDataURI ( ) . then ( function onFulfilled ( datauri ) {...
to-datauri 从图像源 url 获取数据 uri。 用法 var toDataURI = require('to-datauri'); toDataURI(imagePath, function (error, uri) { // do things. });
一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并...
数据生成器用于从文件转换为[removed]写入文件datauri -f=file.png >> file.png.txt# makes a file "file.png.txt" containing the data URI安装只需运行npm install -g 。 现在,您可以全局使用datauri命令。依存...
CSS本地图像参考->数据URI转换接受文件... #用法css-img-datauri-stream(文件[,选择]) file - CSS文件转换opts -可选对象,其“maxImageSize”成员指定一个字节大小超过该局部图像的引用将不被转换到数据的URI。
如果前端web开发人员需要和后台代码工程师配合,那么使用...图片 Base64(任意图片转DataURI格式) 编码规范检测(HTML/CSS/JS规范检测) 页面性能检测(页面响应时间、Header监测) Ajax调试功能(需在控制台中使用)
调整大小 将dataURI调整为最大尺寸 用法 var resizeo = require('resizeo'); resizeo(dataUri, 1024, function(error, resizedUri) { // use resizedUri });
图片Base64(任意图片转DataURI格式) 随机密码生成(任意字符、任意长度、随机生成) 编码规范检测(HTML/CSS/JS规范检测) 页面性能检测(页面响应时间、Header监测) 页面栅格标尺(页面栅格化、屏幕标尺) Ajax...
自述文件埃里克沃特2015-01-25 DataURI PHP 库#这个项目是什么# DataUri 类提供了一种访问和构造数据 URI 的便捷方法,但不应依赖它来执行 RFC 2397 标准。 本课程不会: 验证提供/解析的媒体类型验证提供/解析的...