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

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:

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:

Als Beispiel

Ein Bild auf einer Webseite kann so angezeigt werden:

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

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

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标签展示:

';

}

}