data类型的Url格式及Base64编码:把小数据直接嵌入到Url中

SJY发表于:2017年05月28日 17:24 • 阅读:

所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。

data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持!

如:<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA.."/> 就可以显示为一张图片

data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。

这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

data类型Url的形式

既然是Url,当然也可以直接在浏览器的地址栏中输入。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html> 

在浏览器中输入以上的Url,会得到一个加粗的"Hello, world!"。也就是说,data:后面的数据直接用做网页的内容,而不是网页的地址。

注:Internet Explorer 不支持

简单的说,data类型的Url大致有下面几种形式。

data:,<文本数据>

data:text/plain,<文本数据>

data:text/html, 

data:text/html;base64, 

data:text/css, 

data:text/css;base64, 

data:text/javascript, 

data:text/javascript;base64, 

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图片数据

因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。

完整的语法定义

在RFC中,完整的语法定义如下。

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype  := [ type "/" subtype ] *( ";" parameter )

data       := *urlchar

parameter  := attribute "=" value

urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。

parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

这个例子会显示出"你好,中文!"。如果吧charset部分去掉,就会显示乱码,因为我用的是UTF-8编码。

Firefox有一个data类型Url的测试页面,列出了各种格式的data类型Url的测试Url,和测试结果说明。

base64编码和内容的隐秘

把二进制数据转换成为Base64不是什么难事,各种编程语言都提供了二进制对Base64的转码

如在C#中:

//编码
byte[] bytes = Encoding.Default.GetBytes("要转换的字符");
string str = Convert.ToBase64String(bytes);
//解码
byte[] outputb = Convert.FromBase64String(str);
string orgStr = Encoding.Default.GetString(outputb);

一. Base64的编码规则

Base64编码的思想是是采用64个基本的
ASCII码字符对数据进行重新编码。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24
位数据,再把这24位数据分成4组,即每组6位。再在每组的的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节。当所
要编码的数据的字节数不是3的整倍数,也就是说在分组时最后一组不够3个字节。这时在最后一组填充1到2个0字节。并在最后编码完成后在结尾添加1到2个
“=”。

例:将对ABC进行BASE64编码:

1、首先取ABC对应的ASCII码值。A(65)B(66)C(67);
2、再取二进制值A(01000001)B(01000010)C(01000011);
3、然后把这三个字节的二进制码接起来(010000010100001001000011);
4、再以6位为单位分成4个数据块,并在最高位填充两个0后形成4个字节的编码后的值,(00010000)(00010100)(00001001)(00000011),其中蓝色部分为真实数据;
5、再把这四个字节数据转化成10进制数得(16)(20)(9)(3);
6、最后根据BASE64给出的64个基本字符表,查出对应的ASCII码字符(Q)(U)(J)(D),这里的值实际就是数据在字符表中的索引。

注:BASE64字符表:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

二.解码规则

解码过程就是把4个字节再还原成3个字节再根据不同的数据形式把字节数组重新整理成数据。

欢迎转载,但请保留原文地址 http://www.sjyhome.com/articles/data-url-base64.html

回复(0)