浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!
互联网 & 02-22 11:06:30 & 作者：佚名 &
所谓 data 类型的Url格式，是在RFC2397中 提出的，目的对于一些 小 的数据，可以在网页中直接嵌入，而不是从外部文件载入
所谓&data&类型的Url格式，是在RFC2397中 提出的，目的对于一些&小&的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。 data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:( 小例子 下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml" & &head& &style type="text/css"& .title { background-image:url(data:image/base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D); background-repeat:repeat-x; height:28 line-height: 28 text-align: } &/style& &/head& &body& &div class="title"&Hello, world!&/div& &/body& &/html& 这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。 这个图片很小，不过104个字节，直接嵌入到html或css文件还是很合适的。 data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址， 现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载， 当然同时也增加了当前网页的大小。所以对&小&数据特别有好处。 data类型Url的形式 既然是Url，当然也可以直接在浏览器的地址栏中输入。 data:text/html,&html&&body&&p&&b&Hello, world!&/b&&/p&&/body&&/html& 在浏览器中输入以上的Url，会得到一个加粗的&Hello, world!&。 也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。 简单的说，data类型的Url大致有下面几种形式。 代码如下: data:,&文本数据& data:text/plain,&文本数据& data:text/html,&HTML代码& data:text/base64,&base64编码的HTML代码& data:text/css,&CSS代码& data:text/base64,&base64编码的CSS代码& data:text/javascript,&Javascript代码& data:text/base64,&base64编码的Javascript代码& data:image/base64,base64编码的gif图片数据 data:image/base64,base64编码的png图片数据 data:image/base64,base64编码的jpeg图片数据 data:image/x-base64,base64编码的icon图片数据 因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。 换句话说，引入base64以后，就可以支持任意形式的数据格式。 可以在Html的Img对象中使用，例如 &img src=&data:image/x-base64,AAABAAEAEBAAAAAAAABoBQAAF...& /& 可以在Css的background-image属性中使用，例如 代码如下: div.image { width:100 height:100 background-image:url(data:image/x-base64,AAABAAEAEBAAAAAAAABoBQAAF...); } 可以在Html的Css链接处使用，例如 &link rel=&stylesheet& type=&text/css& href=&data:text/base64,LyogKioqKiogVGVtcGxhdGUgKioq...& /& 可以在Html的Javascript链接处使用，例如 &script type=&text/javascript& href=&data:text/base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv...&&&/script&完整的语法定义 在RFC中，完整的语法定义如下。 dataurl := &data:& [ mediatype ] [ &;base64& ] &,& data mediatype := [ type &/& subtype ] *( &;& parameter ) data := *urlchar parameter := attribute &=& value urlchar指的就是一般url中允许的字符，有些字符需要转义，例如&=&要转义为&%3D&，不过我测试下来，至少在Firefox里面，不转义也是可以的。 parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。 data:text/charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB 这个例子会显示出&你好，中文！&。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。 Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。 base64编码和内容的隐秘 把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源， http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html 有些在线转换把base64里面的&=&转换成为%3D，这个在Url中和&=&是一样的，不转换也没什么问题。 当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上，例如下面 可以在Html的Css链接处使用，例如 &link rel=&stylesheet& type=&text/css& href=&data:text/base64,LyogKioqKiogVGVtcGxhdGUgKioq...& /& 可以在Html的Javascript链接处使用，例如 &script type=&text/javascript& href=&data:text/base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv...&&&/script&完整的语法定义 在RFC中，完整的语法定义如下。 dataurl := &data:& [ mediatype ] [ &;base64& ] &,& data mediatype := [ type &/& subtype ] *( &;& parameter ) data := *urlchar parameter := attribute &=& value urlchar指的就是一般url中允许的字符，有些字符需要转义，例如&=&要转义为&%3D&，不过我测试下来，至少在Firefox里面，不转义也是可以的。 parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。 data:text/charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB 这个例子会显示出&你好，中文！&。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。 Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。 base64编码和内容的隐秘 把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源， http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html 有些在线转换把base64里面的&=&转换成为%3D，这个在Url中和&=&是一样的，不转换也没什么问题。 当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上，例如下面的例子。 data:text/charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB 这个例子会显示出&你好，中文！&。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。 Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。 base64编码和内容的隐秘 把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源， http://www.greywyvern.com/code/php/binary2base64 有些在线转换把base64里面的&=&转换成为%3D，这个在Url中和&=&是一样的，不转换也没什么问题。 当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上。
大家感兴趣的内容
12345678910
最近更新的内容rel="nofollow"
target="_blank"
class="itm noul
" hidefocus="true" href="http://blog.163.com/redirect.html?frompersonalbloghome&url=http:Independent JPEG Group
Independent JPEG Group
IJG is an informal group that writes and distributes a widely used free
library for JPEG image compression.
The first version was released on 7-Oct-1991.
The current version is release 9c of 14-Jan-2018.
This is a stable and solid foundation for many application's JPEG support.
You can find our original code and some supporting documentation
in the directory .
There is a Windows format package in zip archive format
and a Unix format package in tar.gz archive format
A collection of modified versions with adaptions and error
fixes for system maintenance is available on jpegclub.org
in the directory .
To learn more about how to use JPEG, see the
If you'd like to learn about how JPEG works, start with the
IJG is not affiliated with the ISO/IEC JTC1/SC29/WG1 standards committee
(previously known as JPEG, together with ITU-T SG16).
IJG development continues.
Advanced features are being prepared for coming releases...
The development site for new versions is the全屏多格式图片浏览编辑器 JPEGView下载V1.0.25 英文绿色免费版_小巧快速的全屏图片浏览器和编辑器西西软件下载
西西软件园多重安全检测下载网站、值得信赖的软件下载站！
相关软件 /中文/ /中文/ /中文/ /英文/ /英文/ /中文/ /中文/ /中文/ /中文/ /中文/顶好评:50%踩坏评:50%请简要描述您遇到的错误，我们将尽快予以修正。轮坛转帖HTML方式轮坛转帖UBB方式
22.8M/中文/5.5
520.8M/中文/4.2
500M/中文/3.1
132.4M/中文/1.3
498.0M/中文/1.9
119.5M/中文/8.0
149.9M/中文/5.3
JPEGView 是一个小巧快速的全屏和编辑器，支持JPEG, BMP, PNG, GIF 和 TIFF格式的图像.并支持调整图像锐度、色彩平衡、对比度、局部过渡。
安卓官方手机版
IOS官方手机版
全屏多格式图片浏览编辑器 JPEGView V1.0.25 英文绿色免费版
下载帮助西西破解版软件均来自互联网, 如有侵犯您的版权, 请与我们联系。奇怪！明明是gif图片，看图片信息为gif，但地址最后标为jpg，下载后为jpeg，图片还是动态的，ps软件打不开_百度知道
奇怪！明明是gif图片，看图片信息为gif，但地址最后标为jpg，下载后为jpeg，图片还是动态的，ps软件打不开
我有更好的答案
该图片真实属性就是GIF，只不过扩展名被人为改成JPG了，你可以把扩展名改回GIF
〔昨天提问没全显示〕在u5软件能看到，以前从未发生过这情况，现在大多数gif图片下载是这样。 如下载时，在迅雷把地址后面jpg改成gif，也就行了，但下载多的话也太麻烦了。
你说的这种情况确实存在，因为已发现有些网站不知出于何种原因故意将网上的gif图片扩展名修改为jpg
采纳率：55%
为您推荐：
其他类似问题
gif图片的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。