Blob

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

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

Blob()

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

Blob.size Nur lesbar

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

Blob.type Nur lesbar

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

Blob.arrayBuffer()

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

Blob.bytes()

Gibt ein Versprechen zurück, das mit einem Uint8Array gelöst wird, der den Inhalt des Blobs enthält.

Blob.slice()

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

Blob.stream()

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

Blob.text()

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

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

Der folgende Code erstellt ein JavaScript- getyptes Array und erstellt einen neuen Blob, der die Daten des getypten Arrays enthält. Anschließend wird URL.createObjectURL() aufgerufen, um den Blob in eine URL umzuwandeln.

HTML

<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>

JavaScript

Das Hauptstück dieses Codes für Beispielzwecke ist die typedArrayToURL()-Funktion, die aus dem gegebenen getypten Array einen Blob 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 für das src-Attribut des <img>-Elements (vorausgesetzt, die Daten enthalten natürlich 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);
}

Ergebnis

Eine Möglichkeit, Inhalte aus einem Blob zu lesen, ist die Verwendung eines FileReader. Der folgende Code liest den Inhalt eines Blobs als getyptes 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 einer Response. Der folgende Code liest den Inhalt eines Blobs als Text:

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

Oder durch die Verwendung von Blob.text():

const text = await blob.text();

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

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