瀏覽器中的data類型的Url格式,data:image/png,data:image/jpeg

時間 2019-11-10

標籤瀏覽器 data 類型 url 格式 image png jpeg 欄目瀏覽器简体版

原文原文鏈接

所謂"data"類型的Url格式，是在RFC2397中提出的，目的對於一些「小」的數據，能夠在網頁中直接嵌入，而不是從外部文件載入。例如對於img這個Tag，哪怕這個圖片很是很是的小，小到只有一個點，也是要從另一個外部的圖片文件例如gif文件中讀入的，若是瀏覽器實現了data類型的Url格式，這個文件就能夠直接從頁面文件內部讀入了。javascript

data類型的Url格式早在1998年就提出了，時至今日，Firfox、Opera、Safari和Konqueror這些瀏覽器都已經支持，可是IE直到7.0版本都尚未支持，IE不支持的東西太多了，也不差這一個。:(php

小例子css

下面這個html代碼能夠在支持data類型Url的瀏覽器中運行，例如Firefox。運行後會看到一條藍色漸變底色的標題。html

<!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/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
background-repeat:repeat-x;
height:28px;
line-height: 28px;
text-align:center;
}
</style>
</head>
<body>
<div class="title">Hello, world!</div>
</body>
</html>

這個漸變的藍色底色其實是用一個1x28的小圖片經過橫行重複(repeat-x)造成的。這個圖片很小，不過104個字節，直接嵌入到html或css文件仍是很合適的。java

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/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圖片數據

由於Url是一種基於文本的協議，因此gif/png/jpeg這種二進制屬於須要用base64進行編碼。換句話說，引入base64之後，就能夠支持任意形式的數據格式。下面是個png圖片的例子，會在瀏覽器中顯示一個Mozilla的圖標。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==data格式Url的種種應用舉例

能夠在Html的Img對象中使用，例如

能夠在Css的background-image屬性中使用，例如

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}

能夠在Html的Css連接處使用，例如

能夠在Html的Javascript連接處使用，例如

在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不是什麼難事，好比Total Commander就有這樣的功能。還有一些在線資源，

http://www.greywyvern.com/code/php/binary2base64 http://www.kawa.net/works/js/data-scheme/base64-e.html

有些在線轉換把base64裏面的「=」轉換成爲%3D，這個在Url中和「=」是同樣的，不轉換也沒什麼問題。

固然，這種Url還有一種隱祕的好處，就是將一些道貌岸然者不喜歡的東西，冠冕堂皇的放在頁面上，你懂的。