Data URI scheme - 数据的uri模式
-----------------------------------------------------------------------------------------------
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模式的更多相关文章
- 006-网页嵌入数据Data URI scheme
在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入 ...
- JS魔法堂:Data URI Scheme介绍
一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...
- Data URI Scheme,base64
一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...
- 网页优化URI(http URI scheme与data URI scheme)
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
- data URI scheme及其应用
data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI ...
- 关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- Data URI scheme:data:image/jpeg;
今天在用一个croppic的jQuery裁剪图片的插件的时候,发现在后台获取图片时,无法通过Request.File获取了,但是通过Request.Form[]可以.用firebug跟了一下发现,图片 ...
- 什么是data:image/png;base64,?一道关于Data URI Scheme的入门级CTF_Web题
一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...
随机推荐
- Glow 效果材质
转自:http://blog.csdn.net/panda1234lee/article/details/60960846 算法较简单,首先来看 Base color 部分: 就是将对事先准备好的三张 ...
- 转]GSM模块信号强度CSQ与RSSI的对应关系
使用GSM或者3G模块时,都会接触到信号强度CSQ.通过指令AT+CSQ,模块返回当前的信号质量,例如: AT+CSQ +CSQ: 28,0 其中28就是信号强度CSQ,但它不是真实的CSQ,他应该叫 ...
- 07 grep命令与正则表达式
grep命令 首先我们知道grep命令是用来做文件内容过滤的!如果你要在文件中查找一些对应的内容,我们如何来过滤找到其中我们需要符合条件的内容呢?grep命令结合正则表达式就可以实现: grep.eg ...
- SP694 DISUBSTR - Distinct Substrings
/* 统计每个节点的max和min, 然后求和即可 min = max[fa] + 1 */ #include<cstdio> #include<algorithm> #inc ...
- Codeforces Round #492 (Div. 2)
A. /* 从大往小依次除 */ #include<cstdio> #include<algorithm> #include<cstring> #include&l ...
- is和==的区别
is 比较的是内存地址 == 比较的是内容 当两个变量指向同一个对象的时候. is是True, ==也是True
- tornado项目注意点
大体框架思想 如果你做的项目是偏向中小型的话,MTV或者MVC已经足够支撑起整个项目,而如果你做的项目比较大大话,或者说可能以后的业务量很大的话,那你就需要用到四层架构的思想了,那么我们就各自分析下俩 ...
- 自写-自动拨号测试app
XML - Main <?xml version="1.0" encoding="utf-8"?> <android.support.cons ...
- wmware虚拟机的克隆
VMware 支持两种类型的克隆:完整克隆 链接克隆 完整克隆是和原始虚拟机完全独立的一个拷贝,它不和原始虚拟机共享任何资源.可以脱离原始虚拟机独立使用. 链接克隆需要和原始虚拟机共享同一虚拟磁盘文件 ...
- Strandbeest mechanism and Leg mechanism
I have to say besides computer science study, I'm also interested in Leg mechanism. Share two keywor ...