blob: URLs
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Blob- (oder Objekt-)URLs, URLs mit dem Präfix des blob:-Schemas, ermöglichen die Integration von Blobs und MediaSources mit anderen APIs, die nur für die Verwendung mit URLs ausgelegt sind, wie etwa dem <img>-Element. Blob-URLs können auch verwendet werden, um zu lokal generierten Daten zu navigieren oder Downloads davon auszulösen. Sie sind als opake Identifikatoren konzipiert (das heißt, Sie sollten sie nicht selbst schreiben) und sollten mit den Funktionen URL.createObjectURL() und URL.revokeObjectURL() verwaltet werden.
Blob-URLs ähneln Data-URLs, da beide die Darstellung von Ressourcen im Arbeitsspeicher als URLs ermöglichen. Der Unterschied besteht darin, dass Data-URLs Ressourcen selbst einbetten und starken Größenbeschränkungen unterliegen, während Blob-URLs ein zugrunde liegendes Blob oder MediaSource erfordern und größere Ressourcen darstellen können.
Syntax
blob:<origin>/<uuid>
Nutzungshinweise
Speicherverwaltung
Jedes Mal, wenn Sie createObjectURL() aufrufen, wird eine neue Objekt-URL erstellt, auch wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jede dieser URLs muss durch Aufrufen von URL.revokeObjectURL() freigegeben werden, wenn Sie sie nicht mehr benötigen. Solange eine Objekt-URL aktiv ist, kann das zugrunde liegende Objekt nicht durch die Garbage Collection bereinigt werden und kann Speicherlecks verursachen.
Browser geben Objekt-URLs automatisch frei, wenn das Dokument entladen wird. Für optimale Leistung und Speichernutzung sollten Sie sie jedoch explizit freigeben, wenn dies zu einem sicheren Zeitpunkt möglich ist.
Vermeiden Sie jedoch, die Objekt-URL zu früh freizugeben. Ein häufiges Anti-Pattern ist das folgende:
const url = URL.createObjectURL(blob);
img.src = url;
img.addEventListener("load", () => {
URL.revokeObjectURL(url);
});
document.body.appendChild(img);
Das sofortige Widerrufen der Blob-URL, nachdem das Bild gerendert wurde, würde das Bild für Benutzerinteraktionen unbrauchbar machen, beispielsweise für das Speichern des Bildes per Rechtsklick oder das Öffnen in einem neuen Tab. Bei langlebigen Anwendungen sollten Sie Objekt-URLs erst widerrufen, wenn die Ressource für den Benutzer nicht mehr zugänglich ist, etwa wenn das Bild aus dem DOM entfernt wird.
Speicherpartitionierung
Der Zugriff auf Ressourcen über Blob-URLs unterliegt denselben Einschränkungen wie alle anderen Speichermechanismen, d.h. der Zustandspartitionierung. Blob-URLs verfügen über einen zugeordneten Ersteller-Ursprung (der in der URL selbst gespeichert ist) und können nur aus Umgebungen abgerufen werden, deren Speicherschlüssel mit dem der Erstellerumgebung übereinstimmt. Blob-URL-Navigationen unterliegen dieser Einschränkung nicht, obwohl Browser Datenschutzmaßnahmen wie noopener für websiteübergreifende Navigationen zu einer Blob-URL durchsetzen können.
Verwenden von Objekt-URLs für Medienstreams
In älteren Versionen der Media-Source-Spezifikation erforderte das Anhängen eines Streams an ein <video>-Element die Erstellung einer Objekt-URL für den MediaStream. Dies ist nicht mehr erforderlich, und Browser entfernen die Unterstützung dafür.
Warnung:
Wenn Sie noch Code haben, der auf createObjectURL() angewiesen ist, um Streams an Medienelemente anzuhängen, müssen Sie Ihren Code aktualisieren, um srcObject direkt auf den MediaStream zu setzen.
Abrufen mit dem Range-Header
Blob-URLs unterstützen das Abrufen mit dem Range-Header, um Teilinhalte anzufordern. Dies ist besonders nützlich bei der Arbeit mit großen Blobs, da Sie nur die erforderlichen Teile des Blobs statt des gesamten Inhalts abrufen können. Ein Beispiel finden Sie unter Abrufen eines Bereichs aus einer Blob-URL.
Beispiele
Gültige Blob-URLs
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f64
Erstellen von Blob-URLs
In diesem Beispiel erstellen wir zunächst ein Blob aus einem <canvas>, erstellen eine Blob-URL dafür und hängen die URL schließlich an ein <img>-Element an.
const canvas = document.querySelector("canvas");
canvas.toBlob((blob) => {
const img = document.createElement("img");
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
});
Spezifikationen
| Spezifikation |
|---|
| File API # url |