当前位置:首页 > 网络 > 正文内容

通过data:image/png;base64把图片直接写在src里

jinesc9个月前网络889


从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64。。。查了一下资料分析如下:

 

关于用base64存储图片

网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。
  Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入

Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据

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浏览器都支持这种小文件嵌入。

 

  我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。

 


相关文章

在win 8.1 使用 K3客户端

 现在能运行winxp的电脑越来越少了, 在win8.1下安装软件K31:把 win8.1的登录用户名改成 win2003下的用户名 包括密码;2:选...

Windows 2008 R2配置IIS ASP

1、计算机--管理--角色--添加角色--下一步--Web 服务器(IIS)--下一步--下一步--勾选ASP--添加所需的角色服务--下一步--安装--关闭2、选中Default Web Site-...

域名解析记录A、CNAME、MX、NS、TXT、AAAA、SRV、显性URL、隐形URL含义

域名解析记录A、CNAME、MX、NS、TXT、AAAA、SRV、显性URL、隐形URL含义

转载▼分类: 域名1.         A记录(IP指向):把域名(www.xxx.com)解析到某...

icePubDll应用.生成文字的文本图案(字符填充)

icePubDll应用.生成文字的文本图案(字符填充)

工具/原料 windows os;vc6/vb6;icePubDll.dll; 步骤/方法 VB具体步骤: 界面布局设计  ...

教你用Spcaserv架设网络视频监控服务器

教你用Spcaserv架设网络视频监控服务器

1、网络监控服务器的说明;  如何用摄像头做一个时时监控的系统呢?也就是说有一台网络专用临控服务器,其它客户机通过网络影像监控软件或浏览器来进行时时监控摄像头所在位置,所发生的一切。我没有弄过专业类的...

参考资料 php串口通信编程问题

原帖地址 : http://bbs.chinaunix.net/thread-2306104-1-1.html 最近做个小项目,要远程控制一个水泵,编程只会一点儿php,正好方便远程控制...

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。