>

那个时候有很多个版本的 Data URL Schema,那个时候

- 编辑:澳门博发娱乐官网 -

那个时候有很多个版本的 Data URL Schema,那个时候

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data U奥迪Q5L 早在 一九九四 年就被建议,今年有许多少个本子的 Data USportageL Schema 定义陆陆续续出现在 VRML 之中,随后赶忙,其中的叁个版本被提上了议案——将它做个多个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的岁月来看(一九九九年),它是一个异常受接待的注解。

Data ULX570Is 定义的剧情能够视作小文件被插入到其余文书档案之中。U中华VI 是 uniform resource identifier 的缩写,它定义了接受内容的协商以及附带的连带内容,假使附带的连锁内容是一个地点,那么此时的 UPRADOI 也是贰个 USportageL (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兰德EnclaveI 并不一定满含二个位置新闻,如(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 编码。它直接包涵了剧情但并从未一个鲜明的能源地址。

图片 1

Data UHavalIs 定义的从头到尾的经过能够当作小文件被插入到别的文书档案之中。U本田CR-VI 是 uniform resource identifier 的缩写,它定义了接受内容的商业事务以及附带的连带内容,倘若附带的连锁内容是叁个地址,那么此时的 USportageI 也是叁个 U福特ExplorerL (uniform resource locator),如:

☞ 兼容性

是因为出现时间较早,近些日子主流的浏览器基本都帮衬data URAV4I:

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

但是一些浏览器对 data UKugaI 的选取存在限制:

  • 长度限制,长度超长,在部分选取下会变成内存溢出,程序崩溃

    Opera 下限制为 4100 个字符,目前已经去掉了这个限制
    IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
    
  • 在 IE 下,data U揽胜极光I 只允许被用到如下地方:

    在 IE 下,Data UXC60I 的剧情必需是经过编码调换的,如 “#”、”%”、非 US-ASCII 字符、多字节字符等,必需透过编码转变

    • object (images only)
    • img、input type=image、link
    • CSS 中允许选拔 U大切诺基L 阐明的地方,如 background

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

MHTML 便是 MIME HTML,是 “Multipurpose Internet Mail Extensions HyperText 马克up Language” 的简称,它就疑似五个带着附属类小部件的邮件一般,如下所示:

/** 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 的尺码注释了。

在线调换为Base64编码网址:

我们莫不注意到了,网页上多少图片的src或css背景图片的url前面跟了一大串字符,比方:data:image/png;base64, iVBO大切诺基w0KGgoAAAANSUhEUgnZVJlYW奥迪Q35ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是怎么啊?那是Data U宝马7系I scheme。 

☞ 扩充阅读

  • RFC 2397 RFC文档
  • MDN – data_URIs MDN文档
  • MSDN – data Protocal.aspx) MSDN文档
  • NC – data_uris_explained
  • phpied – MHTML

    1 赞 1 收藏 评论

图片 2

其情商为 data,并报告顾客端将以此剧情作为 image/gif 格式来剖析,需求深入分析的内容使用的是 base64 编码。它平昔包括了剧情但并从未四个规定的能源地址。

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

我们也许注意到了,网页上有一点图片的src或css背景图片的url前边跟了一大串字符,比方:data:image/png;base64, iVBO福睿斯w0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGX昂CoraFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWGL4505ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFWrangler0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是如何吧?那是Data UENCOREI scheme。
Data ULANDI scheme是在PRADOFC2397中定义的,指标是将一部分小的多少,间接嵌入到网页中,进而不用再从外表文件载入。比如上边那串字符,其实是一张小图片,将那些字符复制黏贴到火狐的地点栏中并转到,就会阅览它了,一张1X36的玉米黄png图片。

base64简单地说,它把部分 8-bit 数据翻译成标准 ASCII 字符,英特网有繁多无需付费的base64 编码和解码的工具,在PHP中得以用函数base64_encode() 实行编码,如echo base64_encode(file_get_contents(‘wg.png’)); 
当下,IE8、Firfox、Chrome、Opera浏览器都辅助这种小文件嵌入。 

☞ 格式

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

  • 首先某个是 data: 合同头,它标志那么些剧情为一个 data URI 资源。
  • 其次某个是 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 U中华VI 承载的原委,它可以是纯文本编写的内容,也能够是通过 base64编码 的故事情节。

过多时候大家使用 data UCR-VI 来表现一些较长的剧情,如一串二进制数据编码、图片等,选取 base64 编码能够让内容变得越来越简便易行。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,容量扩张大致为三分一,所以接纳的时候必要权衡。

Data UWranglerL 早在 一九九二年就被建议,这一年有数不清个本子的 Data U中华VL Schema 定义陆陆续续出现在 VRML 之中,随后赶忙,当中的叁个版本被提上了议案——将它做个贰个嵌入式的能源放置在 HTML 语言之中。从 RFC 文档定稿的年华来看(1996年),它是一个异常受接待的发明。

Data U途乐L 早在 1992年就被建议,今年有多数个本子的 Data UHighlanderL Schema 定义陆陆续续出未来 VRML 之中,随后赶忙,在那之中的一个版本被提上了议案——将它做个八个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的岁月来看(壹玖玖玖年),它是八个十分受迎接的阐述。

大家把图像文件的剧情一贯写在了HTML 文件中,那样做的利润是,节省了三个HTTP 哀告。坏处呢,正是浏览器不会缓存这种图像。大家能够依靠实际情形开展随机选用。

本文由胜博发-前端发布,转载请注明来源:那个时候有很多个版本的 Data URL Schema,那个时候