您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)如何實現(xiàn)Data URI scheme以及實圖片 base64 編碼,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
一、 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/H6iQ0hTh7iPWglzTFXj5u2b+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://cache.yisu.com/upload/information/20210312/296/133058.png”/>
也可以這樣顯示:
代碼如下:
<img src=“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==”/>
我們把圖像文件的內(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=""/>'; } }
關(guān)于如何實現(xiàn)Data URI scheme以及實圖片 base64 編碼就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。