Blob à partir de DataURL ?

Question

Utilisation de FileReader 's readAsDataURL() Je peux transformer des données arbitraires en une URL de données. Existe-t-il un moyen de reconvertir une URL de données en une URL de type Blob en utilisant les apis intégrées du navigateur ?

Answer 1

L'utilisateur Matt a proposé le code suivant il y a un an ( Comment convertir dataURL en objet fichier en javascript ? ) qui pourrait vous aider

EDIT : Comme certains commentateurs l'ont signalé, BlobBuilder a été déprécié il y a quelque temps. Voici le code mis à jour :

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

Answer 2

Comme la méthode de @Adria mais avec l'api Fetch et juste plus petit [ caniuse ? ]
Il n'est pas nécessaire de penser au mimetype puisque le type de réponse du blob fonctionne d'emblée.

Avertissement : Peut violer la politique de sécurité du contenu (CSP)
...si vous utilisez ce truc

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

Je ne pense pas que vous puissiez le faire plus petit sans utiliser les librairies.

Answer 3

Sur navigateurs modernes on peut utiliser le one liner proposé par Christian d'Heureuse dans un commentaire :

const blob = await (await fetch(dataURI)).blob();

Answer 4

dataURItoBlob : function(dataURI, dataTYPE) {
        var binary = atob(dataURI.split(',')[1]), array = [];
        for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], {type: dataTYPE});
    }

dataURI est l'URL de la donnée et dataTYPE est le type de fichier, puis l'objet blob en sortie.

Answer 5

Méthode basée sur XHR.

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752

    req.onload = function fileLoaded(e)
    {
        // If you require the blob to have correct mime type
        var mime = this.getResponseHeader('content-type');

        callback( new Blob([this.response], {type:mime}) );
    };

    req.send();
}

dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
    console.log( blob );
});