Convertir l'URI de données en fichier puis l'ajouter à FormData

J'ai essayé de réimplémenter un téléchargeur d'images HTML5 comme celui du site Mozilla Hacks , mais cela fonctionne avec les navigateurs WebKit. Une partie de la tâche consiste à extraire un fichier image de l' canvasobjet et à l'ajouter à un objet FormData pour le télécharger.

Le problème est que, bien qu'il canvasait la toDataURLfonction de renvoyer une représentation du fichier image, l'objet FormData accepte uniquement les objets File ou Blob de l' API File .

La solution Mozilla a utilisé la fonction Firefox uniquement sur canvas:

var file = canvas.mozGetAsFile("foo.png");

... qui n'est pas disponible sur les navigateurs WebKit. La meilleure solution à laquelle je pourrais penser est de trouver un moyen de convertir un URI de données en un objet File, que je pensais pouvoir faire partie de l'API File, mais je ne peux pas pour la vie de moi trouver quelque chose à faire.

C'est possible? Sinon, des alternatives?

Merci.

Après avoir joué avec quelques choses, j'ai réussi à comprendre cela moi-même.

Tout d'abord, cela convertira un dataURI en un Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

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

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

À partir de là, il est facile d'ajouter les données à un formulaire afin qu'elles soient téléchargées sous forme de fichier:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

BlobBuilder et ArrayBuffer sont désormais obsolètes, voici le code du premier commentaire mis à jour avec le constructeur Blob:

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

Celui-ci fonctionne dans iOS et Safari.

Vous devez utiliser la solution ArrayBuffer de Stoive mais vous ne pouvez pas utiliser BlobBuilder, comme l'indique vava720, alors voici le mashup des deux.

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

Firefox possède les méthodes canvas.toBlob () et canvas.mozGetAsFile () .

Mais les autres navigateurs ne le font pas.

Nous pouvons obtenir dataurl du canevas, puis convertir dataurl en objet blob.

Voici ma dataURLtoBlob()fonction. C'est très court.

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

Utilisez cette fonction avec FormData pour gérer votre canevas ou dataurl.

Par exemple:

var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

En outre, vous pouvez créer une HTMLCanvasElement.prototype.toBlobméthode pour le navigateur de moteur non gecko.

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };
}

Fonctionne maintenant canvas.toBlob()pour tous les navigateurs modernes, pas seulement Firefox. Par exemple:

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8
);

Ma façon préférée est canvas.toBlob ()

Mais de toute façon, voici encore une autre façon de convertir base64 en un blob en utilisant fetch ^^,

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

fetch(url)
.then(res => res.blob())
.then(blob => {
  var fd = new FormData()
  fd.append('image', blob, 'filename')
  
  console.log(blob)

  // Upload
  // fetch('upload', {method: 'POST', body: fd})
})

Grâce à @Stoive et @ vava720, j'ai combiné les deux de cette manière, en évitant d'utiliser les BlobBuilder et ArrayBuffer obsolètes

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

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

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

La norme évolutive semble être canvas.toBlob () et non canvas.getAsFile () comme Mozilla risquait de le deviner.

Je ne vois aucun navigateur le supportant encore :(

Merci pour ce super fil!

En outre, quiconque essaie la réponse acceptée doit être prudent avec BlobBuilder car je trouve que le support est limité (et espacé):

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

Utilisiez-vous le polyfill d'une autre bibliothèque pour BlobBuilder?

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

peut être utilisé sans la prise d'essai.

Merci à check_ca. Bon travail.

La réponse originale de Stoive est facilement réparable en modifiant la dernière ligne pour accueillir Blob:

function dataURItoBlob (dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(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);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

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

Voici une version ES6 de la réponse de Stoive :

export class ImageDataConverter {
  constructor(dataURI) {
    this.dataURI = dataURI;
  }

  getByteString() {
    let byteString;
    if (this.dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(this.dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(this.dataURI.split(',')[1]);
    }
    return byteString;
  }

  getMimeString() {
    return this.dataURI.split(',')[0].split(':')[1].split(';')[0];
  }

  convertToTypedArray() {
    let byteString = this.getByteString();
    let ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return ia;
  }

  dataURItoBlob() {
    let mimeString = this.getMimeString();
    let intArray = this.convertToTypedArray();
    return new Blob([intArray], {type: mimeString});
  }
}

Usage:

const dataURL = canvas.toDataURL('image/jpeg', 0.5);
const blob = new ImageDataConverter(dataURL).dataURItoBlob();
let fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Merci! @steovi pour cette solution.

J'ai ajouté le support à la version ES6 et je suis passé de unescape à dataURI (unescape est déconseillé).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

simplifiez: D

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    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([ia], { type: mime });

    return blob;
}

toDataURL vous donne une chaîne et vous pouvez la mettre dans une entrée cachée.

J'ai eu exactement le même problème que Ravinder Payal, et j'ai trouvé la réponse. Essaye ça:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});