Skim URI data penerangan terperinci dan contoh penggunaan serta kaedah pelaksanaan pengekodan imej base64_html5 kemahiran tutorial-Tutorial H5-php.cn

Skim URI data penerangan terperinci dan contoh penggunaan serta kaedah pelaksanaan pengekodan imej base64_html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:47:56

asal

2427 orang telah melayarinya

1. Pengenalan kepada skema URI Data

Skim URI data ditakrifkan dalam RFC2397 Tujuannya adalah untuk membenamkan beberapa data kecil terus ke halaman web, supaya tidak perlu memuatkannya daripada fail luaran. Sebagai contoh, rentetan aksara di atas sebenarnya adalah gambar kecil Salin dan tampal aksara ini ke dalam bar alamat Firefox dan pergi ke sana, dan anda akan melihatnya, gambar png putih dan kelabu 1X36.
Dalam URI Data di atas, data mewakili nama protokol untuk mendapatkan data, imej/png ialah nama jenis data, base64 ialah kaedah pengekodan data dan perkara yang mengikuti koma ialah data berkod base64 bagi imej /png fail.
Mungkin anda perasan bahawa pada sesetengah halaman web, url imej latar belakang src atau css bagi imej itu bukanlah pautan imej dalam talian biasa kami, tetapi rentetan besar aksara, seperti ini:

Salin kod

Kod adalah seperti berikut:

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9/// " 8wlcnxnr8sdddnd7bun7v2v /e4bjhiAdg4wjincbhwdvi5b /j5wigolvelxciu5bsrygv1kqovoysyyyy0wkqfnkesr7gotdtstzi4olnskgziSkgziSkgziSkgziSkgziSkgziSkgziSkgz bzds1yeu3mjj5owobf1565pg7nqqm NC6BLPZZ8VPFHEZT1CGI7CIRGTGHPKVKVEFIJ JudgqojJJJJJJJJJJJJJJJJJJJJJJJJJJNGNGNGNGNGNGNGNGNGNGNGNGTC1ATPUN kvJAJDX5LURTP0XPGOJSLNHXV1KTHRO4JK8WPNHERA GN4WUCWHBXAC81I03BVFCSNF1SS PNVFVAIJME4VDHTNRQNT5WQO3JS7JS7JS7JS7JS7JS7AS7 796 " swzibfb15y/qwml1/om6vdogvywv7tvfwll2g14s2bz izjj5wtsjlynoggpiy2jmijyttt8vjn36iAdafaxqwzahwfmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhmyhn V9Y2MC4RWQKMWUSONYLVWQ5IQR1IGQK 5HJPNR2FWMWMWXA3 2jrEFzJL5QAIAOw==

Apakah ini? Ini ialah skema URI Data yang akan diperkenalkan oleh Script House hari ini.

Pada masa ini, jenis yang disokong oleh skema URI Data ialah:

Salin kod

Kod adalah sebagai berikut:

data:, data teks
data:teks/plain, data teks
data:text/html, kod HTML
data:text/html base64; kod HTML yang dikodkan
data:text/css,kod CSS
data:text/css;base64,base64 dikodkan kod CSS
data:text/javascript,Kod Javascript
data:text/javascript;base64 ,base64 Kod Javascript Dikodkan
data:image/gif;base64,base64 dikodkan data imej gif
data:image/png;base64,base64 dikodkan data imej png
data:image/jpeg;base64,base64 Dikodkan data imej jpeg
data:image/x-icon; base64, base64 dikodkan data imej ikon
base64 secara ringkas, ia menterjemahkan beberapa data 8-bit ke dalam aksara ASCII standard, yang boleh digunakan dalam PHP Function base64_encode() melakukan pengekodan.

Pada masa ini, pelayar IE8, Firefox, Chrome dan Opera semuanya menyokong pembenaman fail kecil ini. Untuk IE7 dan versi terdahulu, isu keserasian dengan skema URI data boleh diselesaikan dengan menggunakan MHTML.

Sebagai contoh

Gambar pada halaman web boleh dipaparkan seperti ini:

Salin kod

Kod adalah seperti berikut:

juga boleh digunakan Dipaparkan seperti ini:

Salin kod

Kod adalah seperti berikut:

我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一使家了一个家

二、图片 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标签展示：

'; }

}