web-dev-qa-db-fra.com

Conversion de données png base64 en objets de fichier javascript

J'en ai deux base64 codé en PNG, et je dois les comparer avec Resemble.JS

Je pense que la meilleure façon de le faire est de convertir les PNG en objets de fichier en utilisant fileReader. Comment puis-je le faire?

javascriptbase64fileapi
35
Bonik

Vous pouvez créer un Blob à partir de vos données base64, puis le lire asDataURL:

var img_b64 = canvas.toDataURL('image/png');
var png = img_b64.split(',')[1];

var the_file = new Blob([window.atob(png)],  {type: 'image/png', encoding: 'utf-8'});

var fr = new FileReader();
fr.onload = function ( oFREvent ) {
    var v = oFREvent.target.result.split(',')[1]; // encoding is messed up here, so we fix it
    v = atob(v);
    var good_b64 = btoa(decodeURIComponent(escape(v)));
    document.getElementById("uploadPreview").src = "data:image/png;base64," + good_b64;
};
fr.readAsDataURL(the_file);

Exemple complet ( inclut le code indésirable et le journal de la console ): http://jsfiddle.net/tTYb8/

Alternativement, vous pouvez utiliser .readAsText, ça marche bien, et c'est plus élégant .. mais pour une raison quelconque le texte ne sonne pas bien;)

fr.onload = function ( oFREvent ) {
    document.getElementById("uploadPreview").src = "data:image/png;base64,"
    + btoa(oFREvent.target.result);
};
fr.readAsText(the_file, "utf-8"); // its important to specify encoding here

Exemple complet: http://jsfiddle.net/tTYb8/3/

34
c69

Way 1: ne fonctionne que pour dataURL, pas pour d'autres types d'URL.

function dataURLtoFile(dataurl, filename) {
    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 File([u8arr], filename, {type:mime});
}

//Usage example:
var file = dataURLtoFile('data:image/png;base64,......', 'a.png');
console.log(file);

Way 2: fonctionne pour tout type d'URL (URL http, dataURL, blobURL, etc ...)

//return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1];
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], filename, {type:mimeType});})
    );
}

//Usage example:
urltoFile('data:image/png;base64,......', 'a.png')
.then(function(file){
    console.log(file);
})

Les deux fonctionnent dans Chrome et Firefox.

45
cuixiping

La réponse précédente n'a pas fonctionné pour moi.

Mais cela a parfaitement fonctionné. Convertir l'URI des données en fichier puis ajouter à FormData

4
love2code