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?
Just create an image, set the src to the data URL, and use that image for your <image-cropper>. In any event, check my answer, should set you in the right direction if you absolutely most convert the data URL to something useful, such as a blob.
Use the Image() Constructor and the src Property to Convert Base64 to Image in JavaScript. Here, we will add the base64 string to the function getBase64Img() . Passing that function to a new variable, we will use it in another function that will perform the conversion task.
How to convert Base64 to file. Paste your string in the “Base64” field. Press the “Decode Base64 to File” button. Click on the filename link to download the file.
World's simplest online Portable Network Graphics image to base64 converter. Just import your PNG image in the editor on the left and you will instantly get a base64-encoded string on the right. Free, quick, and very powerful. Import a PNG – get base64.
Way 1: only works for dataURL, not for other types of 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: works for any type of 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); })
Both works in Chrome and Firefox.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With