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 解题过程 通过给的这个文 ...
随机推荐
- Visual Ribbon Editor for CRM 连接
- .net百度编辑器的使用
1.前端引用 <%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="t ...
- python利用socket写一个文件上传
1.先将一张图片拖入‘文件上传’的目录下,利用socket把这张图片写到叫‘yuan’的文件中 2.代码: #模拟服务端 import subprocess import os import sock ...
- 动态参数(*args,**kwargs),命名空间和作用域,global和nonlocal,函数的嵌套
1. 动态参数 位置参数的动态参数: *args 关键字参数的动态参数 : **kwargs 顺序: 位置,*args,默认值,**kwargs 在形参上*聚合, **聚合 在实参上*打散, **打散 ...
- js数据类型转换 ----流程控制
数据类型转换: //number转换成str // var str=a+''; // console.log(str); // console.log(typeof str); //转换成字符串了 v ...
- scp(secure copy)安全拷贝
scp(secure copy)安全拷贝 (1)scp定义: scp可以实现服务器与服务器之间的数据拷贝.(from server1 to server2) (2)基本语法 命令 递归 要拷贝的文 ...
- 权限认证之OpenID-OP/RP
OpenID规范文档中的介绍: OpenID 认证提供了一种方式,可以让用户证明自己对某个 Identifier 拥有控制权. 它不需要 Relying Party 去访问用户的凭据比如密码或者其他的 ...
- Java执行js代码
在做项目中有时候需要用到Java调用js文件执行相应的方法 在JDK1.6添加了新的ScriptEngine类,允许用户直接执行js代码. import org.junit.Test; import ...
- Dubbox服务demo
一.安装虚拟机,安装所需要的jdk.zookeeper并启动zookeeper,虚拟机的ip+zookeeper默认端口号2181 二.编写Service服务方 1.创建Maven项目 2.编写接口 ...
- C# 趣味小程序(4)——遍历特定目录及其子目录
//递归方法遍历目录,并统计其中文件的数目 private int statisticFiles(string directory) { int st ...