Wie kann ich Base64-Daten in JavaScript effizient in einen Blob dekodieren?

Base64-Daten in einen Blob dekodieren: Ein umfassender Leitfaden für JavaScript-Entwickler

In JavaScript ist die Arbeit mit Base64-codierten Binärdaten eine häufige Aufgabe. Um diese Daten dem Benutzer anzuzeigen, ist es häufig erforderlich, ein Blob-Objekt zu erstellen. Dieser Artikel bietet eine ausführliche Anleitung zum Dekodieren von Base64-Daten in einen Blob und geht dabei auf die besondere Herausforderung des Umgangs mit unerschwinglich großen Daten-URLs ein.

Base64 in ein Byte-Array konvertieren

Zum Dekodieren einer Base64-Zeichenfolge Um Binärdaten zu konvertieren, können wir die Funktion atob nutzen. Es gibt eine neue Zeichenfolge mit einem Zeichen für jedes Byte in den codierten Daten zurück.

Um diese Zeichen in ihre entsprechenden Bytewerte umzuwandeln, iterieren wir über jedes Zeichen mit der charCodeAt-Methode, was zu einem Array von Bytenummern führt.

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

Erstellen eines typisierten Byte-Arrays

Wir können den Uint8Array-Konstruktor verwenden, um die Bytezahlen zu konvertieren Array in ein typisiertes Byte-Array umwandeln, bei dem es sich um ein Array-ähnliches Objekt handelt, das die zugrunde liegenden Binärdaten darstellt.

const byteArray = new Uint8Array(byteNumbers);

Konvertieren in einen Blob

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

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

Optimierung Leistung

Obwohl der obige Code funktioniert, kann seine Leistung verbessert werden, indem die Bytezeichen in kleineren Slices statt auf einmal verarbeitet werden.

Die folgende b64toBlob-Funktion demonstriert diese Verbesserung anhand einer Slice-Größe von 512 Bytes, was nachweislich ein gutes Gleichgewicht zwischen Speichernutzung und Leistung bietet.

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

Voll Beispiel

Um die Verwendung von b64toBlob zu demonstrieren, können wir ein Bildelement erstellen und seine Quelle auf eine Blob-URL festlegen, die aus einem Base64-codierten Bild erstellt wurde.

const blob = b64toBlob(b64Data, 'image/png');
const blobUrl = URL.createObjectURL(blob);

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

Indem Sie diese Schritte befolgen und Mithilfe der bereitgestellten Codeausschnitte können Sie Base64-Daten effektiv in Blob-Objekte in JavaScript dekodieren und so den Benutzern große Binärdaten anzeigen, ohne auf Datenbeschränkungen zu stoßen URLs.

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