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

Data URI

阅读更多

 

    前言

 

本文部分内容来自 《随网之舞的Data URI 和 MHTML

 

本人做积累学习用,感谢作者!

 

 

    正文

 

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

 

  • MIME-type:嵌入数据的MIME,形式:[type]/[subtype];比如png:image/png
  • base64:数据的编码是base64的

   举例

 

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDg.....

 

   优势

 

  • 减少了HTTP请求
  • 小文件的话,带宽也会降低

    

   劣势

 

  • 需要解码和显示,有点消耗
  • 不支持压缩
  • 不能单独缓存
  • 不能重复利用,一个页面的多个地方,需要重复多次

 

   工具

 

    http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

 

 

   支持情况: 

 

 

    扩展阅读:

 

    http://dancewithnet.com/2009/08/15/data-uri-mhtml/

分享到:
评论

相关推荐

    .net 图片base64编码 Data URI scheme

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

    探究dataURI中使用SVG正确姿势

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

    Data URI浅析

    ### Data URI浅析 #### Data URI简介 Data URI是一种特殊的数据表示形式,它允许将小文件内嵌到超文本标记语言(HTML)、级联样式表(CSS)等文档中,而无需额外的HTTP请求。这种方式简化了资源加载过程,提高了...

    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插件。 ...

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

    Data URI和MHTML是两种在Web开发中用于嵌入资源的技术,它们可以帮助优化网页加载速度和性能,尤其是在处理小文件和图像时。然而,这两种方法都有其特定的优缺点和适用场景。 Data URI(Data URL Scheme)是一种在...

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

    首先,要了解什么是datauri。Data URI方案是一种编码机制,它允许在网页中直接嵌入文件数据,而无需通过URL访问外部资源。格式通常如下所示: `data:[][;base64],&lt;data&gt;` 其中,mediatype 是指MIME类型,比如图片的...

    image-encoder:将图片编码为dataURI

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

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

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

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

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

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

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

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

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

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

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

    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命令。依存...

    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 . ...

    resizeo:调整dataURI的大小

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

    datauri-download

    数据下载 接受文件名和datauri,并使浏览器打开文件/数据的下载对话框。 例子 datauriDownload ( 'gradebook.csv' , 'text/csv;charset=utf-8' , toCsv ( gradebookData ) )

    DataURL_生成工具_网页版_英文版

    DataURL(Data URI Scheme)是URI(Uniform Resource Identifier)的一种特殊形式,它由"data:"前缀、媒体类型、分隔符";"以及经过Base64编码的数据组成。例如,一个简单的DataURL可能看起来像这样: ``` data:...

Global site tag (gtag.js) - Google Analytics