Ausführliche Erklärung und Verwendungsbeispiele für das Daten-URI-Schema sowie Tutorial-Fähigkeiten zur Implementierung der Bildbase64-Kodierung method

Ausführliche Erklärung und Verwendungsbeispiele für das Daten-URI-Schema sowie Tutorial-Fähigkeiten zur Implementierung der Bildbase64-Kodierung method_html5

WBOY

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

Original

2427 Leute haben es durchsucht

1. Einführung in das Daten-URI-Schema

Das Daten-URI-Schema ist in RFC2397 definiert. Der Zweck besteht darin, einige kleine Daten direkt in Webseiten einzubetten, sodass sie nicht aus externen Dateien geladen werden müssen. Bei der obigen Zeichenfolge handelt es sich beispielsweise tatsächlich um ein kleines Bild. Kopieren Sie diese Zeichen, fügen Sie sie in die Adressleiste von Firefox ein und rufen Sie sie auf. Sie sehen ein 1x36 großes PNG-Bild in Weiß und Grau.
Im obigen Daten-URI stellt „data“ den Protokollnamen zum Abrufen von Daten dar, „image/png“ ist der Name des Datentyps, „base64“ ist die Codierungsmethode der Daten und was auf das Komma folgt, sind die Base64-codierten Daten des Bildes /png-Datei.
Vielleicht ist Ihnen aufgefallen, dass auf einigen Webseiten die SRC- oder CSS-Hintergrundbild-URL des Bildes nicht unser üblicher Online-Bildlink ist, sondern eine große Zeichenfolge, wie zum Beispiel diese:

Code kopieren

Der Code lautet wie folgt:

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9/// / wAAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBj /DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V /e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQm uzz5PT2m6I3ykXPyzf8 fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJ jUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRA gN4wuCWhbxaC81I03bvfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUT yTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZ IZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK 5hjpNr2fWmWmWXA3 2jrEFzJL5QAIAOw==

Was ist das? Dies ist das Daten-URI-Schema, das Script House heute vorstellen wird.

Derzeit werden vom Daten-URI-Schema folgende Typen unterstützt:

Code kopieren

Der Code ist wie folgt folgt:

Daten:, Textdaten
Daten:text/plain, Textdaten
Daten:text/html, HTML-Code
Daten:text/html, base64; codierter HTML-Code
data:text/css,CSS-Code
data:text/css;base64,base64 codierter CSS-Code
data:text/javascript,Javascript-Code
data:text/javascript;base64 ,base64-codierter Javascript-Code
data:image/gif;base64,base64-codierte GIF-Bilddaten
data:image/png;base64,base64-codierte PNG-Bilddaten
data:image/jpeg;base64,base64-codiert jpeg-Bilddaten
data:image/x-icon; base64, base64-codierte Symbolbilddaten
base64 übersetzt einige 8-Bit-Daten in Standard-ASCII-Zeichen, die in der PHP-Funktion base64_encode() verwendet werden können führt die Kodierung durch.

Derzeit unterstützen alle Browser IE8, Firefox, Chrome und Opera diese Einbettung kleiner Dateien. Für IE7 und frühere Versionen kann das Kompatibilitätsproblem mit dem Daten-URI-Schema durch die Verwendung von MHTML gelöst werden.

Als Beispiel

Ein Bild auf einer Webseite kann so angezeigt werden:

Code kopieren

Der Code lautet wie folgt:

kann auch wie folgt verwendet werden:

Kopieren Sie den Code

Der Code lautet wie folgt:

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求使得加

二、图片 base64 编码的实现方法示例

2.1 JS 🎜 >function readFile(){

var file = this.files[0];
if(!/image/w /.test(file.type)){
warning("请确保文件为图像类型");

return false;

} var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '

img_area.innerHTML = '

图片img标签展示:< ;/div>

}

}

2.2 HTML5- und FileReader-Version mit Base64-Unterstützung

HTML5 Javascript 版本核心代码：
var file = this.files[0];
if(!/image/w /.test(file.type)){
warning("请确保文件为图像类型");
return false ;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){

result.innerHTML = '

'; img_area.innerHTML = '

图片img标签展示:

}