Blob

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

Die APIs, die Blob-Objekte akzeptieren, sind auch in der File-Dokumentation aufgeführt.

Blob()

Gibt ein neu erstelltes Blob-Objekt zurück, das eine Verkettung aller Daten im Array enthält, das dem Konstruktor übergeben wurde.

Blob.size Schreibgeschützt

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

Blob.type Schreibgeschützt

Eine Zeichenkette, die den MIME-Typ der im Blob enthaltenen Daten angibt. Ist der Typ unbekannt, ist diese Zeichenkette leer.

Blob.arrayBuffer()

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

Blob.bytes()

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

Blob.slice()

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

Blob.stream()

Gibt einen ReadableStream zurück, der zum Lesen des Inhalts des Blob verwendet werden kann.

Blob.text()

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

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

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

Das folgende Beispiel erstellt ein JavaScript- Typed Array und erstellt ein neues Blob, das die Daten des typisierten Arrays enthält. Es ruft dann URL.createObjectURL() auf, um das 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 wichtigste Element dieses Codes für Beispielzwecke ist die Funktion typedArrayToURL(), die ein Blob vom gegebenen typisierten Array erstellt und eine Objekt-URL dafür zurückgibt. Nachdem die Daten in eine Objekt-URL umgewandelt 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).

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);
}

Eine Möglichkeit, den Inhalt eines Blob zu lesen, besteht darin, einen FileReader zu verwenden. 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, den Inhalt eines Blob zu lesen, besteht darin, einen Response zu verwenden. Der folgende Code liest den Inhalt eines Blob als Text:

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

Oder durch Nutzung von Blob.text():

const text = await blob.text();

Durch die Verwendung anderer Methoden des FileReader ist es möglich, die Inhalte eines Blob als Zeichenkette oder Daten-URL zu lesen.

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