Convert base64 png data to javascript file objects

Question

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

User · Accepted Answer

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

User · Answer

Previous answer didn t work for me   But this worked perfectly  Convert Data URI to File then append to FormData

User · Answer

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

[javascript] Convert base64 png data to javascript file objects

Examples related to javascript

Examples related to base64

Examples related to fileapi