Comment créer un Blob à partir d'une chaîne Base64 en JavaScript ?

Création d'un blob à partir d'une chaîne Base64 en JavaScript

Le problème

Vous avez des données binaires codées en base64 dans une chaîne et souhaitez créer un URL de blob contenant ces données et affichez-la à l'utilisateur. Plus précisément, l'objectif est de créer un objet Blob à partir de la chaîne base64, comme le montre l'extrait de code ci-dessous :

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

La solution

Pour décoder une chaîne base64 en un objet Blob dans JavaScript, suivez ces étapes :

1. Décoder la base64 data : Utilisez la fonction atob pour décoder la chaîne base64 en une chaîne de caractères :

   const byteCharacters = atob(b64Data);

2. Convertir les caractères octets en valeurs octets : Créer un tableau de valeurs d'octets en obtenant le point de code de caractère (charCode) pour chaque caractère du string :

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

3. Créez un tableau d'octets typé : Convertissez les valeurs d'octets en un véritable tableau d'octets typé à l'aide du constructeur Uint8Array :

   const byteArray = new Uint8Array(byteNumbers);

4. Enveloppez dans un tableau et créez Blob : Créez un objet Blob en encapsulant le tableau d'octets dans un tableau et en le transmettant au constructeur Blob :

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

Optimisation des performances

Le code ci-dessus est entièrement fonctionnel, mais les performances peuvent être améliorées en découpant les caractères d'octet en morceaux plus petits avant le traitement.

Complet Exemple

Voici un exemple complet, créant un élément d'image à partir du 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);

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!