`
xyqck163
  • 浏览: 107110 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Data URI 格式

CSS 
阅读更多

 

Data URI 是由RFC 2397 定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:

data:[<MIME-type>][;base64],<data>

  1. MIME-type:指定嵌入数据的MIME 。其形式是[type]/[subtype]; parameter ,比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息,更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
  2. 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正确姿势

    本文将深入探讨如何在dataURI中正确使用SVG,以实现高效、灵活的Web图形展示。 首先,了解dataURI的基本原理。dataURI是一种URL scheme,它允许在单一的URL内直接包含文件内容。其基本格式如下: ``` data:[][;...

    Data URI浅析

    例如,`data:image/png`表示该Data URI包含PNG格式的图像数据。 ##### 可选参数 可选参数用于进一步定义Data URI的行为或特性。主要包括以下两种: - **字符集**:指定Data URI中的字符编码。默认情况下,Data URI...

    .net 图片base64编码 Data URI scheme

    Data URI Scheme是一种URI(统一资源标识符)方案,它允许在单个URI中包含资源的数据,而不是提供指向资源的地址。其基本格式如下: ```text data:[][;base64],&lt;data&gt; ``` 其中,`&lt;mediatype&gt;`是资源的MIME类型,...

    Go-SVGdatauri用于在CSS中内联小型SVG图标

    Go语言提供了一个名为Go-SVGdatauri的工具,专门用于将SVG图标转换为data URI格式,以便于在CSS中直接引用。 data URI是一种在Web内容中嵌入资源的方式,它允许将图片、字体等数据编码为Base64字符串,并直接放在...

    Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例

    3. 将base64字符串拼接成datauri格式。 首先,使用Node.js的内置模块fs(文件系统)读取本地图片文件。通过`fs.readFileSync`方法可以同步地读取文件,该方法会返回文件的二进制数据。例如: ```javascript var fs ...

    Python库 | python_datauri-0.2.7-py2.py3-none-any.whl

    `python_datauri`是一个这样的库,专为处理Data URI(数据URI)而设计。Data URI是一种在Web开发中用于内联嵌入小文件的机制,它可以将图像、文本等数据直接编码到HTML或CSS中,从而减少HTTP请求,提高页面加载速度...

    datauri:通过terminal或node.js生成Data-URI方案

    模组npm i --save datauri命令行界面npm i -g datauri-cli使用datauri的工具NPM脚本古尔一个插件,用于将图像转换为嵌入式数据URI。 旨在用作的简单单一用途包装器。RUN 在datauri模块的顶部运行着许多grunt插件。 ...

    python-datauri:简化数据URI操作

    &gt;&gt; &gt; from datauri import DataURI &gt;&gt; &gt; uri = DataURI ( [removed]VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wZWQgb3ZlciB0aGUgbGF6eSBkb2cu' ) &gt;&gt; &gt; uri . mimetype 'text/plain' &gt;&gt; &gt; uri . charset 'utf-8' &gt;&gt; &gt; uri . ...

    Data URI和MHTML完整解决所有浏览器

    同时,可以使用自动化工具在发布阶段将图片转换为Data URI或MHTML格式,这样可以在保持代码简洁的同时提高页面加载效率。 总结来说,Data URI和MHTML是优化Web性能的两种策略,各有优劣。Data URI适用于减少HTTP...

    iconfont到datauri「iconfont to datauri」-crx插件

    iconfont到datauri 用于将iconfont网站上的项目字体转为内嵌样式可用的datauri编码 支持语言:中文 (简体)

    image-encoder:将图片编码为dataURI

    将图像编码为DataURI。 安装 通过凉亭安装。 $ bower install 1000ch/image-encoder 用法 var ie = new ImageEncoder ( 'path/to/image.png' ) ; ie . getDataURI ( ) . then ( function onFulfilled ( datauri ) {...

    to-datauri:从图像路径获取数据 uri

    to-datauri 从图像源 url 获取数据 uri。 用法 var toDataURI = require('to-datauri'); toDataURI(imagePath, function (error, uri) { // do things. });

    Data URI scheme详解和使用实例及图片base64编码实现方法

    一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并...

    datauri-generator:用于从文件URI转换为数据URI的命令行程序

    数据生成器用于从文件转换为[removed]写入文件datauri -f=file.png &gt;&gt; file.png.txt# makes a file "file.png.txt" containing the data URI安装只需运行npm install -g 。 现在,您可以全局使用datauri命令。依存...

    css-img-datauri-stream:css-img-datauri-stream

    CSS本地图像参考-&gt;数据URI转换接受文件... #用法css-img-datauri-stream(文件[,选择]) file - CSS文件转换opts -可选对象,其“maxImageSize”成员指定一个字节大小超过该局部图像的引用将不被转换到数据的URI。

    前端助手FeHelper插件

    如果前端web开发人员需要和后台代码工程师配合,那么使用...图片 Base64(任意图片转DataURI格式) 编码规范检测(HTML/CSS/JS规范检测) 页面性能检测(页面响应时间、Header监测) Ajax调试功能(需在控制台中使用)

    resizeo:调整dataURI的大小

    调整大小 将dataURI调整为最大尺寸 用法 var resizeo = require('resizeo'); resizeo(dataUri, 1024, function(error, resizedUri) { // use resizedUri });

    FeHelper超好用谷歌插件

    图片Base64(任意图片转DataURI格式) 随机密码生成(任意字符、任意长度、随机生成) 编码规范检测(HTML/CSS/JS规范检测) 页面性能检测(页面响应时间、Header监测) 页面栅格标尺(页面栅格化、屏幕标尺) Ajax...

    DataURI:一个方便的类,用于在 PHP 中处理数据 URI

    自述文件埃里克沃特2015-01-25 DataURI PHP 库#这个项目是什么# DataUri 类提供了一种访问和构造数据 URI 的便捷方法,但不应依赖它来执行 RFC 2397 标准。 本课程不会: 验证提供/解析的媒体类型验证提供/解析的...

Global site tag (gtag.js) - Google Analytics