-----------------------------------------------------------------------------------------------

Data URI scheme is a URI scheme（统一资源定位符的模式）。

我们熟知的站点引用资源文件，都是类似http://www.chenwei.ws/demo.png这种的格式，但是data URI scheme 提供将外部资源嵌入到网页中的方法。

它是一种文件或文档的形式，这项技术允许普通的元素诸如要取的图片，样式表放在单一的http请求中，替代很多http请求。（相当于变成网页的一部分了）

用法=>

HTML:

<img src="data:image/png;base64,iVBORw0Rw0KGgoAA......">

CSS:

div {background: red url('data:image/png;base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;}

JavaScript:(IE8不支持)

<script>

window.open('data:text/html;charset=utf-8,' + encodeURIComponent(

　　　　'<!doctype html>' +

　　　　'html lang='en' +

　　　　'<head><title>Embedded Window</title></head>' +

　　　　'<body><h2>42</h2></body>' +

　　　　'</html>'

　　);

</script>

data 表示数据名称，image/png 是数据类型名称; base64 是数据编码方法，后面是base64编码后的数据。

Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

注：PHP中可以用函数base64_encode()进行编码，base64_encode(file_get_contents('demo.png'));

复制下面数据到浏览器中，看看是什么吧。

data:text/plain;base64,d3d3LmNoZW53ZWkud3M=

-----------------------------------------------------------------------------------------------

参考Wiki: http://en.wikipedia.org/wiki/Data:_URL

Link: http://www.cnblogs.com/farwish/p/3787980.html

Data URI scheme - 数据的uri模式的更多相关文章

  1. 006-网页嵌入数据Data URI scheme

    在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入 ...

  2. JS魔法堂：Data URI Scheme介绍

    一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...

  3. Data URI Scheme,base64

    一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...

  4. 网页优化URI（http URI scheme与data URI scheme）

    网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...

  5. data URI scheme

    优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...

  6. data URI scheme及其应用

    data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI ...

  7. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  8. Data URI scheme:data:image/jpeg;

    今天在用一个croppic的jQuery裁剪图片的插件的时候,发现在后台获取图片时,无法通过Request.File获取了,但是通过Request.Form[]可以.用firebug跟了一下发现,图片 ...

  9. 什么是data:image/png;base64,？一道关于Data URI Scheme的入门级CTF_Web题

    一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...

随机推荐

  1. [UE4]C++中SpawnActor用法(动态创建Actor)

    转自:http://aigo.iteye.com/blog/2270177 C++中创建一个Level并添加的Runtime当中 C++中Spawn一个基于蓝图的Actor https://answe ...

  2. (转)C# WebApi 接口返回值不困惑：返回值类型详解

    原文地址:http://www.cnblogs.com/landeanfen/p/5501487.html 正文 前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi ...

  3. Solr查询参数sort（排序）

    摘要: Solr查询每一次返回的数据都有一定的顺序,特定顺序的结果对于业务来说可能非常重要. 不指定排序 一般我们不指定排序规则,这样的结果能满足大部分需求,默认是用文档的得分作为排序标准.相当于加上 ...

  4. Django中的ORM介绍，字段以及字段的参数。

    Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...

  5. [Ahoi2013]差异(后缀自动机)

    /* 前面的那一坨是可以O1计算的 后面那个显然后缀数组单调栈比较好写??? 两个后缀的lcp长度相当于他们在后缀树上的lca的深度 那么我们就能够反向用后缀自动机构造出后缀树然后统计每个点作为lca ...

  6. 'ascii' codec can't decode byte 0xd6 in position 0

    使用elastalert,执行python文件时报错: 经查,python命令下输出中文字符时需要将编码指定为gb2312,一开始博主也不知道是输出在控制台的信息编码格式问题,一直以为是博主自己的ya ...

  7. day5作业（基本数据类型字符串，列表）

    #coding:utf-8'''默写99乘法标 金字塔 必做: 1.昨日选做题 博客中有 http://www.cnblogs.com/linhaifeng/articles/7133357.html ...

  8. 下雨天，适合学「Spring Boot」

      北方的闷热,让不少小伙伴盼着下雨,前几天北京下了场大雨,杭州也紧跟这下了场雨,就在昨天原本还很闷热的天,突然就飘泼大雨了.今天也断断续续的下着小雨,一觉醒来已经是10点了.有句话说:懒惰是人的天性 ...

  9. gentoo virtualbox 无法启动

    以前的 virtualbox 可以启动,现在无法启动. 原因是因为更新了内核,而 virtualbox 的模块没有跟着更新,所以导致无法启动. emerge --ask --oneshot @modu ...

  10. 使用wifi ssh: connect to host hadoop000 port 22: No route to host

    使用的wifi,在wifi下IP会自动分配. 先尝试能否ping通,如果都无法ping通那先把IP配置那些先搞定ping通之后遇到此问题再来尝试解决. 查看  /etc/hosts 中配置的 IP  ...