Comment convertir une chaîne Base64 en blob en JavaScript ?

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

Lorsque vous travaillez avec des données binaires codées sous forme de chaîne base64, il peut être nécessaire de convertir dans un objet Blob. Cela peut être utile pour afficher les données dans un navigateur Web ou les enregistrer sur l'appareil de l'utilisateur.

Décoder la chaîne Base64

La première étape consiste à décoder la chaîne Base64. chaîne en une chaîne de caractères octets. Ceci peut être réalisé en utilisant la fonction atob.

const byteCharacters = atob(b64Data);

Conversion des caractères d'octets en un tableau d'octets

Ensuite, nous devons convertir le caractères d'octets dans un véritable tableau d'octets typé. Cela peut être fait en passant les caractères d'octet au constructeur Uint8Array.

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

const byteArray = new Uint8Array(byteNumbers);

Création de l'objet Blob

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

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

Optimisation des performances

Le code ci-dessus fonctionne, mais ses performances peuvent être améliorées en traitant les caractères d'octet en tranches plus petites. Une taille de tranche de 512 octets est généralement un bon choix.

Exemple de fonction

Voici une fonction qui convertit une chaîne base64 en un objet Blob en utilisant l'approche optimisée :

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

Exemple d'utilisation

Pour utiliser la fonction, transmettez simplement la chaîne base64 et le type de contenu comme arguments.

const blob = b64toBlob(b64Data, contentType);

L'objet Blob résultant peut ensuite être utilisé pour créer une image ou télécharger les données.

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!