Ich habe große Probleme mit der Blob-URL.
Ich war auf der Suche nach src
eines Video-Tags auf YouTube und ich fand, dass das Video src
war wie:
src="blob:https://crap.crap"
Als ich die Blob-URL öffnete, die in src
des Videos war, gab es einen Fehler. Ich kann den Link nicht öffnen, aber er funktionierte mit dem src
Tag. Wie ist das möglich?
Anforderungen:
Blob-URLs (vgl. W3C, offizieller Name) oder Objekt-URLs (vgl. MDN und Methodenname) werden mit einem Blob oder einem File Objekt verwendet.
src="blob:https://crap.crap" Ich öffnete die Blob-URL, die in src von Video gab es einen Fehler und ich kann'nicht öffnen, aber arbeitete mit dem src Tag, wie ist das möglich?
Blob-URLs können nur intern vom Browser generiert werden. Mit URL.createObjectURL()
wird ein spezieller Verweis auf das Blob- oder Dateiobjekt erzeugt, der später mit URL.revokeObjectURL()
wieder freigegeben werden kann. Diese URLs können nur lokal in der einzelnen Instanz des Browsers und in der gleichen Sitzung (d.h. die Lebensdauer der Seite/des Dokuments) verwendet werden.
Was ist eine Blob-URL?
Warum wird sie verwendet?
Blob-URL/Objekt-URL ist ein Pseudo-Protokoll, das es ermöglicht, Blob- und Dateiobjekte als URL-Quelle für Dinge wie Bilder, Download-Links für Binärdaten usw. zu verwenden.
Einem Image-Objekt können Sie zum Beispiel keine rohen Byte-Daten übergeben, da es nicht weiß, was es damit anfangen soll. Bilder (bei denen es sich um binäre Daten handelt) müssen beispielsweise über URLs geladen werden. Dies gilt für alles, was eine URL als Quelle benötigt. Anstatt die Binärdaten hochzuladen und sie dann über eine URL zurückzuliefern, ist es besser, einen zusätzlichen lokalen Schritt zu verwenden, um direkt auf die Daten zugreifen zu können, ohne über einen Server zu gehen.
Dies ist auch eine bessere Alternative zu Daten-URI, die als Base-64 kodierte Zeichenketten sind. Das Problem bei Data-URI ist, dass jedes Zeichen in JavaScript zwei Bytes benötigt. Hinzu kommt ein Zuschlag von 33 % aufgrund der Base-64-Kodierung. Blobs sind reine binäre Byte-Arrays, die im Gegensatz zu Data-URI keinen nennenswerten Overhead haben, wodurch sie schneller und kleiner zu handhaben sind.
Kann ich meine eigene Blob-URI auf einem Server erstellen?
Nein, Blob URLs/Object URLs können nur intern im Browser erstellt werden. Sie können Blobs erstellen und Datei-Objekte über die File Reader API abrufen, obwohl BLOB nur Binary Large OBject bedeutet und als Byte-Arrays gespeichert wird. Ein Client kann die zu sendenden Daten entweder als ArrayBuffer oder als Blob anfordern. Der Server sollte die Daten als reine Binärdaten senden. In Datenbanken wird häufig auch der Begriff Blob verwendet, um binäre Objekte zu beschreiben, und im Grunde genommen sprechen wir hier von Byte-Arrays.
wenn Sie dann zusätzliche Details haben
Sie müssen die binären Daten als BLOB-Objekt kapseln und dann URL.createObjectURL()
verwenden, um eine lokale URL dafür zu erzeugen:
var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
URL.revokeObjectURL(this.src); // clean-up memory
document.body.appendChild(this); // add image to DOM
}
img.src = url; // can now "stream" the bytes
Beachten Sie, dass URL
in Webkit-Browsern vorangestellt sein kann, verwenden Sie also:
var url = (URL || webkitURL).createObjectURL(...);
Was ist eine Blob-Url? Warum wird sie verwendet?
BLOB ist nur eine Bytefolge. Der Browser erkennt sie als Byte-Stream. Sie wird verwendet, um einen Bytestrom von der Quelle zu erhalten.
Ein Blob-Objekt stellt ein dateiähnliches Objekt mit unveränderlichen Rohdaten dar. Blobs repräsentieren Daten, die nicht unbedingt in einem JavaScript-eigenen Format vorliegen. Die Dateischnittstelle basiert auf Blob, erbt die Blob-Funktionalität und erweitert sie, um Dateien auf dem System des Benutzers zu unterstützen.
*Kann ich meine eigene Blob-Url auf einem Server erstellen?
Ja, das kann man, es gibt mehrere Möglichkeiten, zum Beispiel http://php.net/manual/en/function.ibase-blob-echo.php
Lesen Sie mehr über
Diese Javascript-Funktion soll den Unterschied zwischen der Blob File API und der Data API aufzeigen, um eine JSON-Datei im Client-Browser herunterzuladen:
/**
* Save a text as file using HTML <a> temporary element and Blob
* @author Loreto Parisi
*/
var saveAsFile = function(fileName, fileContents) {
if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else { // Alternative 2: using Data
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
} // saveAsFile
/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));
Die Funktion wird wie saveAsFile('out.json', jsonString);
aufgerufen. Sie erzeugt einen ByteStream, der sofort vom Browser erkannt wird, der die erzeugte Datei direkt über die File API URL.createObjectURL
herunterlädt.
Im else
ist es möglich, das gleiche Ergebnis über das href
-Element plus die Daten-API zu erhalten, aber dies hat mehrere Einschränkungen, die die Blob-API nicht hat.