blob: URLs

Syntax

blob:<origin>/<uuid>

blob:

Das Schema der URL.

<origin>

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

<uuid>

Eine UUID.

Nutzungshinweise

Speicherverwaltung

Jedes Mal, wenn Sie createObjectURL() aufrufen, wird eine neue Objekt-URL erstellt, selbst wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jede davon muss durch Aufruf 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 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 wie noopener 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 den MediaStream. 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 dem Range-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 siehe Abrufen 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 ein Blob 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