Convert base64 png data to javascript file objects

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 instancefunction 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/

Previous answer didn't work for me.

But this worked perfectly.Convert Data URI to File then append to FormData