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

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

La conversion d'une chaîne codée en base64 en un objet Blob est une tâche courante en JavaScript lorsqu'il s'agit de données binaires. Cela peut être utile pour afficher les données sous forme d'image ou pour les télécharger sur l'appareil de l'utilisateur.

Décodage de la chaîne Base64

La première étape consiste à décoder la chaîne base64. Ceci peut être réalisé en utilisant la fonction atob, qui convertit une chaîne codée en base64 en une nouvelle chaîne contenant les données binaires d'origine.

const byteCharacters = atob(b64Data);

Conversion en un tableau d'octets typés

La fonction atob produira une chaîne de caractères, chacun représentant un octet. Pour convertir ces caractères en octets réels, nous pouvons utiliser la méthode .charCodeAt pour obtenir les points de code des caractères. Ces points de code seront les valeurs des octets.

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

Ensuite, nous pouvons créer un Uint8Array en passant le tableau byteNumbers au constructeur.

const byteArray = new Uint8Array(byteNumbers);

Création du Blob

Enfin, nous pouvons créer l'objet Blob en enveloppant le byteArray dans un tableau et en le passant au Blob constructeur.

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

Exemple

Voici un exemple de création d'un Blob à partir d'une chaîne base64 :

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

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

Une fois que vous avez créé le Blob, vous peut l'utiliser pour afficher les données à l'utilisateur ou les télécharger sur son appareil. Vous pouvez utiliser la fonction URL.createObjectURL pour créer une URL pour le Blob, que vous pouvez ensuite définir comme src d'une image ou comme href d'un lien de téléchargement.

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!