Création d’un Blob d’une chaîne base64 en JavaScript

Question

J'ai des données binaires codées en base64 dans une chaîne de caractères.

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

Je voudrais créer un blob: d'URL contenant ces données et de les afficher à l'utilisateur.

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

window.location = blobUrl;

Je n'ai pas été en mesure de comprendre comment créer l' Blob.

Dans certains cas, je suis en mesure d'éviter cela en utilisant un data: URL à la place.

var dataUrl = 'data:' + contentType + ',' + b64Data;

window.location = dataUrl;

Cependant, dans la plupart des cas, l' data: URLs sont trop grandes.

---

Comment puis-je décodage en base64, chaîne en Blob objet en JavaScript?

Answer 1

L' atob fonction décode une chaîne base64 dans une nouvelle chaîne de caractères avec un caractère pour chaque octet de données binaires.

var byteCharacters = atob(b64Data);

Chaque personnage de point de code (charCode) sera la valeur de l'octet. Nous pouvons créer un tableau de valeurs d'octets par l'application de cette aide de l' .charCodeAt méthode pour chaque caractère dans la chaîne.

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

Vous pouvez convertir ce tableau de valeurs d'octets en une véritable tapé tableau d'octets en la passant à l' Uint8Array constructeur.

var byteArray = new Uint8Array(byteNumbers);

Cela peut être converti en Blob en l'enveloppant dans un tableau de passage à l' Blob constructeur.

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

Vous pouvez voir ci-dessus l'approche de travail pour l'exemple original de ce violon. Cependant, le rendement peut être un peu améliorée par le traitement de la byteCharacters dans les plus petites tranches, plutôt que tout à la fois. Dans mon bruts des tests de 512 octets semble être une bonne tranche de taille. Cela nous donne la fonction suivante. Vous pouvez le voir de la manipulation de l'exemple original de ce violon.

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Answer 2

Mise en œuvre optimisée (mais moins lisible) :

Answer 3

Pour tout support du navigateur, en particulier sur android. Peut-être vous pouvez ajouter ce

Answer 4

Pour les données de l’image, je trouve cela plus simple d’utiliser `` (asynchrone)

Answer 5

Cette fonction va décoder base64 sur un tampon qui vous pouvez mettre directement dans un objet blob.