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

Erstellen eines Blobs aus einem Base64-String in JavaScript

Das Problem

Sie haben Base64-codierte Binärdaten in einem String und möchten einen erstellen Blob-URL, die diese Daten enthält, und zeigen Sie sie dem Benutzer an. Konkret besteht das Ziel darin, ein Blob-Objekt aus der Base64-Zeichenfolge zu erstellen, wie im folgenden Codeausschnitt zu sehen ist:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

Die Lösung

Um eine Base64-Zeichenfolge in ein Blob-Objekt zu dekodieren JavaScript, folgen Sie diesen Schritten:

1. Dekodieren Sie die Base64 Daten: Verwenden Sie die atob-Funktion, um die Base64-Zeichenfolge in eine Zeichenfolge zu dekodieren:

   const byteCharacters = atob(b64Data);

2. Byte-Zeichen in Byte-Werte umwandeln: Erstellen Sie ein Array von Bytewerten durch Abrufen des Zeichencodepunkts (charCode) für jedes Zeichen im string:

   const byteNumbers = new Array(byteCharacters.length);
   for (let i = 0; i 

3. Erstellen Sie ein typisiertes Byte-Array: Konvertieren Sie die Bytewerte in ein echtes typisiertes Byte-Array mit dem Uint8Array-Konstruktor:

   const byteArray = new Uint8Array(byteNumbers);

4. Ein Array einschließen und erstellen Blob: Erstellen Sie ein Blob-Objekt, indem Sie das Byte-Array in ein Array einschließen und es an den Blob-Konstruktor übergeben:

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

Leistungsoptimierung

Der Code Das oben genannte ist voll funktionsfähig, die Leistung kann jedoch verbessert werden, indem die Bytezeichen vor der Verarbeitung in kleinere Blöcke aufgeteilt werden.

Vollständig Beispiel

Hier ist ein vollständiges Beispiel für die Erstellung eines Bildelements aus dem Blob:

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

  for (let offset = 0; offset 

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