主頁 > 知識庫 > Data URI scheme詳解和使用實例及圖片base64編碼實現(xiàn)方法

Data URI scheme詳解和使用實例及圖片base64編碼實現(xiàn)方法

熱門標簽:智能芯電話機器人 怎么做百度地圖標注 四川移動電銷外呼客戶管理系統(tǒng) 百度地圖標注為什么總是封號 400開頭的電話好申請不 地圖標注柱狀圖 咸陽穩(wěn)定外呼系統(tǒng)軟件 小朱地圖標注 臨海地圖標注app

一、 Data URI scheme 簡介

Data URI scheme是在RFC2397中定義的,目的是將一些小的數(shù)據(jù),直接嵌入到網(wǎng)頁中,從而不用再從外部文件載入。比如上面那串字符,其實是一張小圖片,將這些字符復制黏貼到火狐的地址欄中并轉(zhuǎn)到,就能看到它了,一張1X36的白灰png圖片。
在上面的Data URI中,data表示取得數(shù)據(jù)的協(xié)定名稱,image/png 是數(shù)據(jù)類型名稱,base64 是數(shù)據(jù)的編碼方法,逗號后面就是這個image/png文件base64編碼后的數(shù)據(jù)。
或許你已經(jīng)注意到,在有的網(wǎng)頁上,圖片的 src 或 css 背景圖片的 url 并不是我們常見的在線圖片鏈接,而是一大串的字符,比如像這樣:

復制代碼
代碼如下:
data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a+5zfn9////wAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK+MEVQoKP04XKJqJBj+/DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V/e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs+UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQmuzz5PT2m6I3ykXPyzf8+fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJjUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==


這是什么呢?這就是腳本之家今天要介紹的 Data URI scheme。


目前,Data URI scheme支持的類型有:

復制代碼
代碼如下:

data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
base64簡單地說,它把一些 8-bit 數(shù)據(jù)翻譯成標準 ASCII 字符,在PHP中可以用函數(shù)base64_encode() 進行編碼。

目前,IE8、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。對于 IE7 及之前版本,可通過使用MHTML 解決 data URI scheme 的兼容問題。


舉例說明

網(wǎng)頁中一張圖片可以這樣顯示:

復制代碼
代碼如下:
<img src=”https://www.jb51.net/images/logo.png”/>

也可以這樣顯示:

復制代碼
代碼如下:
<img src=“data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a+5zfn9////wAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK+MEVQoKP04XKJqJBj+/DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V/e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs+UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQmuzz5PT2m6I3ykXPyzf8+fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJjUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==”/>

我們把圖像文件的內(nèi)容直接寫在了HTML 文件中,這樣做的好處是,節(jié)省了一個HTTP 請求使得加載速度得以提升,壞處則可能導致瀏覽器不會緩存這種圖像。

二、圖片 base64 編碼的實現(xiàn)方法示例

2.1 JS實現(xiàn)圖片 base64 編碼代碼

復制代碼
代碼如下:

function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">圖片img標簽展示:</div><img src="'+this.result+'" alt=""/>';
}
}

2.2 利用 HTML5 的 FileReader 實現(xiàn)圖片 base64 編碼

HTML5 Javascript 版本核心代碼:


復制代碼
代碼如下:

function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">圖片img標簽展示:</div><img src="'+this.result+'" alt=""/>';
}
}

標簽:黃石 公主嶺 黃石 南平 陜西 平頂山 山南

巨人網(wǎng)絡(luò)通訊聲明:本文標題《Data URI scheme詳解和使用實例及圖片base64編碼實現(xiàn)方法》,本文關(guān)鍵詞  Data,URI,scheme,詳解,和,使用,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Data URI scheme詳解和使用實例及圖片base64編碼實現(xiàn)方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于Data URI scheme詳解和使用實例及圖片base64編碼實現(xiàn)方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章