Convertir des données base64 png en objets javascript file
j'ai deux base64 encodés en PNG, et je dois les comparer en utilisant ressemblent.JS
je pense que la meilleure façon de le faire est de convertir le PNG en objets de fichier en utilisant fileReader . Comment puis-je le faire?
3 réponses
vous pouvez créer un Blob à partir de vos données de 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 ( comprend le code de camelote et le journal de la console ): http://jsfiddle.net/tTYb8 /
alternativement, vous pouvez utiliser .readAsText , il fonctionne très bien, et son plus élégant.. mais pour une raison quelconque texte ne sonne pas bon ;)
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 /
Way 1 : fonctionne uniquement pour dataURL, pas pour les 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);
Voie 2 : fonctionne pour n'importe quel 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);
})
fonctionne à la fois en Chrome et en Firefox.
la réponse précédente ne marchait pas pour moi.
mais ça a parfaitement fonctionné. convertir URI de données en Fichier puis Ajouter à FormData