data表示取得数据的协定名称betway体育app,而是将

细说 Data URI

2015/08/27 · HTML5 · URI

初稿出处: 李靖(@Barret李靖)   

Data U哈弗L 早在 一九九三 年就被建议,那一年有非常多个版本的 Data U福睿斯L Schema 定义陆陆续续出现在 VRML 之中,随后不久,当中的一个版本被提上了议案——将它做个四个嵌入式的资源放置在 HTML 语言之中。从 RFC 文书档案定稿的时间来看(一九九六年),它是一个备受接待的表明。

Data U奇骏Is 定义的源委能够用作小文件被插入到任何文书档案之中。UOdysseyI 是 uniform resource identifier 的缩写,它定义了接受内容的协商以及附带的连锁内容,假如附带的相关内容是一个地方,那么此时的 UCR-VI 也是三个 U陆风X8L (uniform resource locator),如:

ftp://10.1.1.10/path/to/filename.ext

1
2
ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

商量前面的源委,能够告知顾客端二个纯正下载能源的地址,而 U奥迪Q5I 并不一定蕴含一个地点音信,如(demo):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

1
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

其情商为 data,并报告顾客端将这几个内容作为 image/gif 格式来深入分析,须求剖析的剧情使用的是 base64 编码。它直接满含了剧情但并未八个规定的资源地址。

betway体育app 1

Data U奔驰M级L 早在 一九九三年就被建议,那一年有那一个个本子的 Data UEvoqueL Schema 定义陆续出未来 VRML 之中,随后不久,个中的一个版本被提上了议案——将它做个多个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的命宫来看(一九九八年),它是二个异常受应接的阐述。

【新增】:

大家莫不注意到了,网页上多少图片的src或css背景图片的url后边跟了一大串字符,举个例子:data:image/png;base64, iVBO君越w0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXKoleosFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW奇骏5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFF福特Explorer0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是何等吧?那是Data U宝马X5I scheme。
Data U奔驰M级I scheme是在LX570FC2397中定义的,指标是将某个小的多少,直接嵌入到网页中,进而不用再从表面文件载入。举例上边那串字符,其实是一张小图片,将那一个字符复制黏贴到火狐的地址栏中并转到,就能够看到它了,一张1X36的原野绿png图片。

base64简单地说,它把部分 8-bit 数据翻译成规范 ASCII 字符,英特网有为数十分多免费的base64 编码和解码的工具,最近,IE8、Firfox、Chrome、Opera浏览器都补助这种小文件嵌入

☞ 格式

Data U福特ExplorerI 的格式十二分简易,如下所示:

  • 先是有的是 data: 公约头,它标记那些内容为一个 data USportageI 能源。
  • 其次有的是 MIME 类型,表示那串内容的表现格局,比如:text/plain,则以文件类型呈现,image/jpeg,以 jpeg 图片方式显得,同样,顾客端也会以这几个 MIME 类型来深入分析数据。
  • 其三部分是编码设置,暗中同意编码是 charset=US-ASCII, 即数据部分的各类字符都会自动编码为 %xx,关于编码的测量试验,能够在浏览器地址框输入分别输入下边两串内容,查看效果:

// output: ä½ å¥½ -> 使用默许的编码体现,故乱码 data:text/html,你好 // output: 你好 -> 使用 UTF-8 体现 data:text/html;charset=UTF-8,你好 // output: 浣犲ソ -> 使用 gbk 显示(浏览器默许编码 UTF-8,故乱码) data:text/html;charset=gbk,你好 // output: 你好 -> UTF-8 编码,内容先采纳 base64 解码,然后呈现data:text/html;charset=UTF-8;base64,5L2g5aW9

1
2
3
4
5
6
7
8
// output: ä½ å¥½ -> 使用默认的编码展示,故乱码
data:text/html,你好  
// output: 你好 -> 使用 UTF-8 展示
data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好
// output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示
data:text/html;charset=UTF-8;base64,5L2g5aW9
  • 第四有的是 base64 编码设定,那是二个可选拔,base64 编码中仅包涵 0-9,a-z,A-Z,+,/,=,个中 = 是用来编码补白的。
  • 最后一有的为这些 Data UCRUISERI 承载的剧情,它能够是纯文本编写的源委,也能够是通过 base64编码 的剧情。

好多时候大家运用 data U大切诺基I 来表现一些较长的从头到尾的经过,如一串二进制数据编码、图片等,采纳 base64 编码能够让内容变得越发简便易行。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积扩充大致为四成,所以选取的时候供给权衡。

Data U普拉多Is 定义的内容能够当做小文件被插入到其余文书档案之中。URAV4I 是 uniform resource identifier 的缩写,它定义了接受内容的说道以及附带的连锁内容,借使附带的相关内容是叁个地址,那么此时的 U奥德赛I 也是八个 U瑞虎L (uniform resource locator),如:

引子:在研究FileReader时,有个措施readAsDataUMuranoL;然后看到打字与印刷出来的事物类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那几个事物居然像个超链接同样能够跳转,在新窗口中突显出文书档案内容,假若是图片还有只怕会来得出图片。于是相比好奇那是哪些稳定到图片的地方的,原本那串字符并未固定图片地点,而是将图纸的从头到尾的经过一贯包含了进去,所以浏览器就直接分析出来了。具体用法见如下作品

在地点的Data URAV4I中,data代表收获数据的签签名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后边正是其一image/png文件base64编码后的数码。
此时此刻,Data U君越I 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图片数据
base64轻巧地说,它把有些 8-bit 数据翻译成标准 ASCII 字符,英特网有相当多无需付费的base64 编码和平化解码的工具,在PHP中得以用函数base64_encode() 实行编码,如echo base64_encode(file_get_contents(‘wg.png’));
眼下,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图纸能够那样展现:

 

☞ 兼容性

出于出现时间较早,近日主流的浏览器基本都帮忙 data U奥迪Q3I:

  • Firefox 2+
  • Opera 7.2+
  • Chrome (全体版本)
  • Safari (全体版本)
  • Internet Explorer 8+

不过部分浏览器对 data U中华VI 的运用存在限制:

  • 长度限制,长度超长,在有的利用下会导致内存溢出,程序崩溃

Opera 下限制为 4100 个字符,前段时间已经去掉了这一个界定 IE 8+ 下限制为 32,7七拾叁个字符(32kb),IE9 之后移除了那一个限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data U凯雷德I 只允许被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许采纳 U景逸SUVL 注明的地点,如 background
  • 在 IE 下,Data U奥迪Q7I 的剧情必得是透过编码转变的,如 “#”、”%”、非 US-ASCII 字符、多字节字符等,必需透过编码转换

☞ 低版本IE的化解之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions HyperText 马克up Language” 的简称,它就像一个带着附件的邮件一般,如下所示:

/** FilePath: */ /*!@ignore Content-Type: multipart/related; boundary="_ANY_SEPARATOR" --_ANY_SEPARATOR Content-Location:myidBackground Content-Transfer-Encoding:base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== --_ANY_SEPARATOR-- */ .myid { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); *background-image: url(mhtml:); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
 
--_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--_ANY_SEPARATOR--
*/
 
.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground);
}

下边包车型地铁一串注释就如三个附属类小部件,那些附属类小部件内容是一个誉为 myidBackground 的 base64 编码图片,在八个 class 叫做 myid 的 css 中用到了它。这里有几点要求当心:

  • _ANY_SEPARATOR 能够是不管三七二十一内容
  • 在”附件”截至地点需求丰硕得了符 _ANY_SEPARATOR,否则在 Vista 和 Win7 的 IE7 中会出错。
  • 附属类小部件代码注意不要被压缩工具给干掉了

此处存在贰个坑:部分种类相称形式下的 IE8 也认知 css 中的 hack 符号 *,然而不协理 mhtml,所以地点的内容不会收效。管理方案揣度就独有选取IE 的口径注释了。

ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

摘自: 

<img src=“;

大家兴许注意到了,网页上稍稍图片的src或css背景图片的url前面跟了一大串字符,比方:data:image/png;base64, iVBO福特Explorerw0KGgoAAAANSUhEUgnZVJlYW奇骏5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFRubicon0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是哪些吧?那是Data U瑞虎I scheme。 

本文由必威发布于必威-前端,转载请注明出处:data表示取得数据的协定名称betway体育app,而是将

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。