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

   Nach dem Login kopieren

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 < byteCharacters.length; i++) {
       byteNumbers[i] = byteCharacters.charCodeAt(i);
   }

   Nach dem Login kopieren

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

   Nach dem Login kopieren

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

   Nach dem Login kopieren

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

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

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

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!