Javascript Girl
  1. Javascript Girl
  3. Convertir des données png base64 en objets de fichier javascript
Intereting Posts
Comment obtenir la dernière partie d'une chaîne en JavaScript? Pourquoi certains concepteurs Web professionnels utilisent des chemins absolus au lieu des chemins relatifs (p. Ex. Pour CSS, Javascript, images, etc.)? Comment utilisez-vous une variable dans une expression régulière? Confusion de prototype Liste de paramètres de javascript array Visual Studio 2010 débogage Javascript avec IE fonctionne mais pas avec firefox ou chrome. Toute solution? ClearRect ne dégage pas la toile lors du dessin des lignes verticales La console JavaScript imprime la valeur assignée de la variable avant qu'elle ne soit affectée? Requêtes HTTP dans Phonegap Comment lier un événement "mobileinit" dans jQuery Mobile? "Télécharger" au lieu de "ouvrir" un fichier texte NgOnInit n'est pas appelé lorsque la classe Injectable est instanciée .js.erb VS .js Comment libérer un objet C ++ enroulé lorsque l'objet Javascript associé est une collecte collectée dans V8? Mise à niveau React à 0.13.2 causes: "Uncaught TypeError: Impossible de lire la propriété '_currentElement' of null"

Convertir des données png base64 en objets de fichier javascript

J'ai deux png encodés base64, et je veux les comparer à l'aide de cette bibliothèque: https://github.com/Huddle/Resemble.js

Je pense que la meilleure façon de le faire est de convertir les png en objets de fichiers à l'aide de FileReader, mais je ne peux pas comprendre comment 🙁

Des pensées?

Je vous remercie!

Vous pouvez créer un Blob partir de vos données base64, puis lisez-le comme 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 , cela fonctionne bien, et c'est plus élégant … mais pour une raison quelconque, le texte ne semble pas correct;) 

 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/

Chemin 1 : ne fonctionne que pour donnéesURL, 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);

Chemin 2 : fonctionne pour n'importe quel type d'url, (http url, dataURL, blobURL, etc …) 

 //return a promise that resolves with a File instance function urltoFile(url, filename, mimeType){ 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', 'image/png') .then(function(file){ console.log(file); })

Les deux fonctionnent dans Chrome et Firefox.

La réponse précédente ne m'a pas fonctionné.

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