Blob- (oder Objekt-)URLs, URLs mit dem Präfixblob:, ermöglichen die Integration vonBlobs undMediaSources mit anderen APIs, die nur für die Verwendung mit URLs entworfen wurden, wie etwa das<img>-Element. Blob-URLs können auch verwendet werden, um zu navigieren sowie Downloads von lokal generierten Daten auszulösen. Sie sind als opake Bezeichner konzipiert (das heißt, Sie sollten sie nicht manuell schreiben) und sollten mit den FunktionenURL.createObjectURL() undURL.revokeObjectURL() verwaltet werden.

Blob-URLs sind ähnlich wieData-URLs, da beide ermöglichen, im Speicher befindliche Ressourcen als URLs darzustellen; der Unterschied besteht darin, dass Data-URLs Ressourcen in sich selbst einbetten und strikte Größenbeschränkungen haben, während Blob-URLs ein unterstützendesBlob oderMediaSource erfordern und größere Ressourcen darstellen können.

Syntax

blob:<origin>/<uuid>

blob:

Das Schema der URL.

<origin>

DerUrsprung des Erstellers dieser URL. Wenn der Ursprung des Erstellers opak ist, dann ist dieser Teil implementierungsdefiniert.

<uuid>

EineUUID.

Nutzungshinweise

Speicherverwaltung

Jedes Mal, wenn SiecreateObjectURL() aufrufen, wird eine neue Objekt-URL erstellt, selbst wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jede davon muss durch Aufruf vonURL.revokeObjectURL() freigegeben werden, wenn Sie sie nicht mehr benötigen. Solange eine Objekt-URL aktiv ist, kann das zugrunde liegende Objekt nicht durch den Garbage Collector entfernt werden und könnte zu Speicherlecks führen.

Browser werden Objekt-URLs automatisch freigeben, wenn das Dokument entladen wird; jedoch sollten Sie, für optimale Leistung und Speichernutzung, wenn es sichere Zeitpunkte gibt, an denen Sie sie explizit entladen können, dies tun.

Dennoch sollten Sie vermeiden, die Objekt-URL zu früh freizugeben. Ein häufiges Anti-Muster 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 (zum Beispiel, wenn man mit der rechten Maustaste klickt, um das Bild zu speichern oder in einem neuen Tab zu öffnen). Für langlebige Anwendungen sollten Sie Objekt-URLs nur widerrufen, wenn die Ressource für den Benutzer nicht mehr zugänglich ist (zum Beispiel, wenn das Bild aus dem DOM entfernt wird).

Speicherpartitionierung

Der Zugriff auf Ressourcen über Blob-URLs unterliegt denselben Einschränkungen wie alle anderen Speichermethoden, das heißt,Statuspartitionierung. Blob-URLs haben einen zugeordneten Ersteller-Ursprung (der in der URL selbst gespeichert ist) und können nur aus Umgebungen abgerufen werden, in denen der Speicher-Schlüssel mit dem der Erstellungsumgebung übereinstimmt. Blob-URL-Navigierungen unterliegen nicht dieser Einschränkung, obwohl Browser möglicherweise Datenschutzmaßnahmen wienoopener für Cross-Site-Navigierungen zu einer Blob-URL durchsetzen.

Verwendung von Objekt-URLs für Medienstreams

In älteren Versionen der Media Source-Spezifikation erforderte das Anhängen eines Streams an ein<video>-Element das Erstellen einer Objekt-URL für denMediaStream. Dies ist nicht mehr notwendig, und Browser entfernen die Unterstützung dafür.

Abrufen mit dem Range-Header

Blob-URLs unterstützen das Abrufen mit demRange-Header, um Teilinhalte anzufordern. Dies ist besonders nützlich beim Arbeiten mit großen Blobs, da es Ihnen ermöglicht, nur die notwendigen Teile des Blobs abzurufen, anstatt den gesamten Inhalt. Für ein Beispiel sieheAbrufen eines Bereichs von 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 zuerst einBlob von einem<canvas>, erstellen eine Blob-URL dazu und hängen schließlich die URL 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

Browser-Kompatibilität

Siehe auch

• Verwendung von Dateien aus Webanwendungen
• Verwendung von Objekt-URLs zur Anzeige von Bildern
• URL.createObjectURL()
• URL.revokeObjectURL()
• IANA-Liste der URI-Schemen