這篇文章將為大家詳細(xì)講解有關(guān)如何實現(xiàn)Data URI scheme以及實圖片 base64 編碼，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
廣陵網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。成都創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
一、 Data URI scheme 簡介
Data URI scheme是在RFC2397中定義的，目的是將一些小的數(shù)據(jù)，直接嵌入到網(wǎng)頁中，從而不用再從外部文件載入。比如上面那串字符，其實是一張小圖片，將這些字符復(fù)制黏貼到火狐的地址欄中并轉(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/H6iQ0hTh7iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==
這是什么呢？這就是創(chuàng)新互聯(lián)今天要介紹的 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ù)翻譯成標(biāo)準(zhǔn) ASCII 字符，在PHP中可以用函數(shù)base64_encode() 進(jìn)行編碼。
目前，IE8、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。對于 IE7 及之前版本，可通過使用MHTML 解決 data URI scheme 的兼容問題。
舉例說明
網(wǎng)頁中一張圖片可以這樣顯示：
代碼如下:
也可以這樣顯示：
代碼如下:
我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個HTTP 請求使得加載速度得以提升，壞處則可能導(dǎo)致瀏覽器不會緩存這種圖像。
二、圖片 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標(biāo)簽展示： 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標(biāo)簽展示： 關(guān)于如何實現(xiàn)Data URI scheme以及實圖片 base64 編碼就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
