Data URI scheme詳解與使用實例及圖片base64編碼實作方法_html5教學技巧

一、 Data URI scheme 簡介

Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。例如上面那串字符，其實是一張小圖片，將這些字符複製貼上到火狐的地址欄中並轉到，就能看到它了，一張1X36的白灰png圖片。
在上面的Data URI中，data表示取得資料的協定名稱，image/png 是資料型別名稱，base64 是資料的編碼方法，逗號後面就是這個image/png檔base64編碼後的資料。
也許你已經注意到，在有的網頁上，圖片的src 或css 背景圖片的url 並不是我們常見的在線圖片鏈接，而是一大串的字符，比如像這樣：

複製程式碼

程式碼如下:

data:image/gif;base64,R0lfnGODlhkQAtAKIAAAAAAP wAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBjjjm e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzsStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs影響 UjOWmYbvx 6I3ykXPyzf8 2ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5L3840FxV vfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 jJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYwllZIBFB15y/QWJt/Fr1FFwV1d2SENZZKYwllZIBFB15y/QW1/Fr1FFwV1d2SENZZKYwllZ JyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK 5hjpN2fLV 🎜>

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

目前，Data URI scheme支援的類型有：

複製程式碼複製程式碼

程式碼>

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;64,base64base64,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 字符，在PHP中可以用函數base64_encode() 進行編碼。

目前，IE8、Firfox、Chrome、Opera瀏覽器都支援這種小檔案嵌入。對於 IE7 及之前版本，可透過使用MHTML 解決 data URI scheme 的相容問題。


舉例說明

網頁中一張圖片可以這樣顯示：

複製程式碼

程式碼如下:

也可以這樣顯示：

複製程式碼

程式碼如下:

A4mUm==XA/FW42bZI

我們把圖片檔的內容直接寫在了HTML檔中，這樣做的好處是，節省了一個HTTP請求使得加

二、圖片base64編碼的實作方法範例 2.1 JS 🎜 >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_area.innerHTML = '

圖片img標籤顯示：< ; /div>';

}

}

2.2 利用 HTML5 的 FileReader 實作圖片 base64 編碼

HTML5 Javascript版本核心程式碼：
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_area.innerHTML = '

圖片img標籤展示：

'; }

}