que online imagen decodificar convertir btoa atob javascript base64 fileapi

online - Convertir datos de base64 png a objetos de archivo javascript



decodificar imagen base64 javascript (3)

Tengo dos codificadores base64 codificados en PNG, y necesito compararlos utilizando Resemble.JS

Creo que la mejor manera de hacerlo es convertir los PNG en objetos de archivo usando fileReader . ¿Cómo puedo hacerlo?



Puede crear un Blob partir de sus datos base64, y luego leerlo 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);

Ejemplo completo ( incluye código basura y registro de consola ): http://jsfiddle.net/tTYb8/

Alternativamente, puede usar .readAsText , funciona bien y es más elegante ... pero por alguna razón, el texto no suena 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

Ejemplo completo: http://jsfiddle.net/tTYb8/3/


Modo 1 : solo funciona para dataURL, no para otros tipos de 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);

Forma 2 : funciona para cualquier tipo de url, (http url, 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); })

Ambos trabajos en Chrome y Firefox.