I have two base64 encoded in PNG, and I need to compare them using Resemble.JS
I think that the best way to do it is to convert the PNG's into file objects using fileReader. How can I do it?
You can create a Blob from your base64 data, and then read it 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);
Full example (includes junk code and console log): http://jsfiddle.net/tTYb8/
Alternatively, you can use .readAsText, it works fine, and its more elegant.. but for some reason text does not sound right ;)
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
Full example: http://jsfiddle.net/tTYb8/3/
