Wie konvertiere ich einen Base64-String in einen Blob in JavaScript?

Erstellen eines Blobs aus einem Base64-String in JavaScript

Beim Arbeiten mit Binärdaten, die als Base64-String codiert sind, kann eine Konvertierung erforderlich sein es in ein Blob-Objekt. Dies kann nützlich sein, um die Daten in einem Webbrowser anzuzeigen oder auf dem Gerät des Benutzers zu speichern.

Dekodierung der Base64-Zeichenfolge

Der erste Schritt besteht darin, die Base64 zu dekodieren string in eine Zeichenfolge aus Byte-Zeichen. Dies kann mit der Funktion atob erreicht werden.

const byteCharacters = atob(b64Data);

Konvertieren von Byte-Zeichen in ein Byte-Array

Als nächstes müssen wir die konvertieren Byte-Zeichen in ein echtes typisiertes Byte-Array. Dies kann durch die Übergabe der Byte-Zeichen an den Konstruktor Uint8Array erfolgen.

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);

Erstellen des Blob-Objekts

Schließlich können wir umschließen das Byte-Array in einem Array und übergeben Sie es an den Blob-Konstruktor, um den Blob zu erstellen Objekt.

const blob = new Blob([byteArray], {type: contentType});

Leistungsoptimierung

Der obige Code funktioniert, aber seine Leistung kann durch die Verarbeitung der Bytezeichen in kleineren Abschnitten verbessert werden. Eine Slice-Größe von 512 Bytes ist normalerweise eine gute Wahl.

Beispielfunktion

Hier ist eine Funktion, die eine Base64-Zeichenfolge mithilfe des optimierten Ansatzes in ein Blob-Objekt konvertiert:

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
    
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
};

Verwendungsbeispiel

An Verwenden Sie die Funktion, übergeben Sie einfach die Base64-Zeichenfolge und den Inhaltstyp als Argumente.

const blob = b64toBlob(b64Data, contentType);

Das resultierende Blob-Objekt kann dann verwendet werden, um ein Bild zu erstellen oder die Daten herunterzuladen.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich einen Base64-String in einen Blob in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!