Wie erstelle ich einen JavaScript-Blob aus einem Base64-String?

Erstellen eines Blobs aus einem Base64-String in JavaScript

Das Konvertieren eines Base64-codierten Strings in ein Blob-Objekt ist eine häufige Aufgabe in JavaScript beim Umgang mit Binärdaten. Dies kann nützlich sein, um die Daten als Bild anzuzeigen oder auf das Gerät des Benutzers herunterzuladen.

Dekodierung des Base64-Strings

Der erste Schritt besteht darin, den Base64-String zu dekodieren. Dies kann mit der atob-Funktion erreicht werden, die einen Base64-codierten String in einen neuen String umwandelt, der die ursprünglichen Binärdaten enthält.

const byteCharacters = atob(b64Data);

Konvertieren in ein typisiertes Byte-Array

Die atob-Funktion erzeugt eine Zeichenfolge, die jeweils ein Byte darstellt. Um diese Zeichen in tatsächliche Bytes umzuwandeln, können wir die Methode .charCodeAt verwenden, um die Zeichencodepunkte abzurufen. Diese Codepunkte sind die Werte der Bytes.

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

Als nächstes können wir ein Uint8Array erstellen, indem wir das byteNumbers-Array an den Konstruktor übergeben.

const byteArray = new Uint8Array(byteNumbers);

Erstellen des Blobs

Schließlich können wir das Blob-Objekt erstellen, indem wir das byteArray in ein Array einschließen und es an den Blob übergeben Konstruktor.

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

Beispiel

Hier ist ein Beispiel, wie man einen Blob aus einer Base64-Zeichenfolge erstellt:

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

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

Sobald Sie den Blob erstellt haben, können Sie kann damit dem Nutzer die Daten anzeigen oder auf sein Gerät herunterladen. Sie können die Funktion URL.createObjectURL verwenden, um eine URL für den Blob zu erstellen, die Sie dann als Quelle eines Bildes oder als Href eines Download-Links festlegen können.

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