使用Data URI scheme来编码你的小图片

今天很有意思,在对组员编写的导入excel功能进行产品功能测试的时候,由于偷懒直接将不太满意的地方使用QQ截图存储到剪辑板中,然后又到项目的web管理平台当中录入Bug,并且继续发扬偷懒精神,直接使用ctrl+v粘贴截图到Bug描述(使用KindEditor超文本编辑器)当中,居然发现1个奇怪的现象:那张Bug截图居然正常的显示在编辑器当中,它可是网页上的编辑器啊,不是Windows应用软件啊,我印象中这种事以前只发生在客户端的1些软件之间的啊。
是的,根据以往的经验,我不太相信这件事,认为它可能是使用的本地系统的绝对文件路径,形如:file://c:/windows/temp/…,但是抱着死猪不怕开水烫的态度,我还是使用html源码进行了查看,这不看不要紧,1看吓1跳,发现下面代码:

<img src="data:image/png;base64,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" alt="" />

这是啥呢?我不知道啊。先把Bug保存吧,然后咱再换台电脑看看不就知道了吗?于是我使用我们远在上海的服务器,毅然绝然的打开了项目web管理平台,并找到了这个Bug,然后沉重的打开它,神奇的事情发生了,竟然完完整整的显示出这张图片来了。神奇的国度啊!可是我不明白啊,搞不懂啊,src里面的东东也不像图片的编码啊。于是Google了1下,原来如此:
这个东东叫Data URI scheme,是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张图片,将src里的字符复制黏贴到火狐的地址栏中并转到,就能看到它了。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
目前,Data URI scheme支持的类型有:
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/9、Firefox、Chrome、Opera等浏览器都支持这种小文件嵌入,注意IE6/7是不支持的哦。

Leave a Reply

Your email address will not be published. Required fields are marked *