Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert base64 png data to javascript file objects

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?

like image 870
Bonik Avatar asked Jun 06 '13 17:06

Bonik


People also ask

How can I convert Base64 image to typescript?

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.

How can I convert an Base64 string into image using JavaScript?

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 do I get files from Base64?

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.

Can a png be Base64?

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.


2 Answers

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.

like image 85
cuixiping Avatar answered Sep 25 '22 00:09

cuixiping


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/

like image 25
c69 Avatar answered Sep 24 '22 00:09

c69