Blob

Verwendung von Blobs

Um einen Blob aus anderen Nicht-Blob-Objekten und Daten zu erstellen, verwenden Sie den Blob()-Konstruktor. Um einen Blob zu erstellen, der einen Teil der Daten eines anderen Blobs enthält, verwenden Sie die slice()-Methode. Um ein Blob-Objekt für eine Datei auf dem Dateisystem des Nutzers zu erhalten, siehe die File-Dokumentation.

Die APIs, die Blob-Objekte akzeptieren, sind ebenfalls in der File-Dokumentation aufgelistet.

Konstruktor

Blob()

Gibt ein neu erstelltes Blob-Objekt zurück, das eine Verkettung aller Daten im an den Konstruktor übergebenen Array enthält.

Instanzeigenschaften

Blob.size Schreibgeschützt

Die Größe in Bytes der im Blob-Objekt enthaltenen Daten.

Blob.type Schreibgeschützt

Ein String, der den MIME-Typ der im Blob enthaltenen Daten angibt. Wenn der Typ unbekannt ist, ist dieser String leer.

Instanzmethoden

Blob.arrayBuffer()

Gibt ein Promise zurück, das mit einem ArrayBuffer aufgelöst wird, der den gesamten Inhalt des Blob als Binärdaten enthält.

Blob.bytes()

Gibt ein Promise zurück, das mit einem Uint8Array aufgelöst wird, der den Inhalt des Blob enthält.

Blob.slice()

Gibt ein neues Blob-Objekt zurück, das die Daten im angegebenen Bereich von Bytes des Blobs enthält, auf dem es aufgerufen wird.

Blob.stream()

Gibt einen ReadableStream zurück, der verwendet werden kann, um den Inhalt des Blob zu lesen.

Blob.text()

Gibt ein Promise zurück, das mit einem String aufgelöst wird, der den gesamten Inhalt des Blob als UTF-8-Text interpretiert enthält.

Beispiele

Erstellen eines Blobs

Der Blob()-Konstruktor kann Blobs aus anderen Objekten erstellen. Zum Beispiel, um einen Blob aus einem JSON-String zu erstellen:

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

Erstellen einer URL, die den Inhalt eines typisierten Arrays darstellt

Das folgende Beispiel erstellt ein JavaScript typisiertes Array und erzeugt einen neuen Blob, der die Daten des typisierten Arrays enthält. Anschließend wird URL.createObjectURL() aufgerufen, um den Blob in eine URL zu konvertieren.

<p>
  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.
</p>

Das Hauptbeispiel dieser Codeberechnung ist die typedArrayToURL()-Funktion, die einen Blob aus dem gegebenen typisierten Array erstellt und eine Objekt-URL dafür zurückgibt. Nachdem die Daten in eine Objekt-URL konvertiert wurden, können sie auf verschiedene Weise verwendet werden, einschließlich als Wert des src-Attributs des <img>-Elements (vorausgesetzt, die Daten enthalten ein Bild, natürlich).

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "View live result of the example code above";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");
  const link = document.createElement("a");

  link.href = url;
  link.innerText = "Open the array URL";
  document.body.appendChild(link);
}

Extrahieren von Daten aus einem Blob

Eine Möglichkeit, Inhalte aus einem Blob zu lesen, ist die Verwendung eines FileReader. Der folgende Code liest den Inhalt eines Blob als typisiertes Array:

const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

Eine andere Möglichkeit, Inhalte aus einem Blob zu lesen, ist die Verwendung eines Response. Der folgende Code liest den Inhalt eines Blob als Text:

const text = await new Response(blob).text();

Oder durch Verwendung von Blob.text():

const text = await blob.text();

Durch die Verwendung anderer Methoden von FileReader ist es möglich, den Inhalt eines Blob als String oder als Daten-URL zu lesen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• FileReader
• File
• URL.createObjectURL()
• Verwendung von Dateien aus Webanwendungen