Comment puis-je décoder efficacement les données Base64 en un blob en JavaScript ?

Décoder des données Base64 en un Blob : un guide complet pour les développeurs JavaScript

En JavaScript, travailler avec des données binaires codées en base64 est une tâche courante. Pour afficher ces données à l'utilisateur, il est souvent nécessaire de créer un objet Blob. Cet article fournit un guide complet sur la façon de décoder des données base64 en un Blob, abordant le défi spécifique de la gestion des URL de données d'une taille prohibitive.

Conversion de Base64 en un tableau d'octets

Pour décoder une chaîne base64 en données binaires, nous pouvons exploiter la fonction atob. Il renvoie une nouvelle chaîne avec un caractère pour chaque octet dans les données codées.

Pour convertir ces caractères en leurs valeurs d'octet correspondantes, nous parcourons chaque caractère à l'aide de la méthode charCodeAt, ce qui donne un tableau de numéros d'octets.

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

Création d'un tableau d'octets typés

Nous pouvons utiliser le constructeur Uint8Array pour convertir l'octet nombres en un tableau d'octets typé, qui est un objet de type tableau représentant les données binaires sous-jacentes.

const byteArray = new Uint8Array(byteNumbers);

Conversion en un Blob

Enfin, nous pouvons envelopper le tableau d'octets tapé dans un tableau et transmettez-le au constructeur Blob pour créer un objet Blob.

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

Optimisation Performances

Bien que le code ci-dessus fonctionne, ses performances peuvent être améliorées en traitant les caractères d'octet en tranches plus petites plutôt qu'en une seule fois.

La fonction b64toBlob ci-dessous démontre cette amélioration, avec une taille de tranche de 512 octets, ce qui s'est avéré offrir un bon équilibre entre l'utilisation de la mémoire et les performances.

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

Complet Exemple

Pour démontrer l'utilisation de b64toBlob, nous pouvons créer un élément d'image et définir sa source sur une URL Blob créée à partir d'une image codée en base64.

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

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

En suivant ces étapes et en utilisant les extraits de code fournis, vous pouvez décoder efficacement les données base64 en objets Blob en JavaScript, vous permettant d'afficher des données binaires volumineuses aux utilisateurs sans rencontrer les limitations des données URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!