blob: URLs

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>

Ein UUID.

Jedes Mal, wenn Sie createObjectURL() aufrufen, wird eine neue Objekt-URL erstellt, auch wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jede davon muss freigegeben werden, indem Sie URL.revokeObjectURL() aufrufen, wenn Sie sie nicht mehr benötigen. Solange eine Objekt-URL aktiv ist, kann das zugrunde liegende Objekt nicht gesammelt werden, was möglicherweise zu Speicherlecks führt.

Browser geben Objekt-URLs automatisch frei, wenn das Dokument entladen wird. Für eine optimale Leistung und Speichernutzung sollten Sie sie jedoch explizit entladen, wenn es sichere Zeiten gibt.

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 unbenutzbar machen (wie das Rechtsklicken zum Speichern des Bildes oder das Öffnen in einem neuen Tab). Bei langlebigen Anwendungen sollten Sie Objekt-URLs nur widerrufen, wenn die Ressource dem Benutzer nicht mehr zugänglich ist (wie wenn das Bild aus dem DOM entfernt wird).

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

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.

In diesem Beispiel erstellen wir zuerst ein Blob aus einem <canvas>, erzeugen eine Blob-URL dafür und fügen die URL schließlich einem <img>-Element hinzu.

const canvas = document.querySelector("canvas");
canvas.toBlob((blob) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});

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