How can I save a base64-encoded image to disk

Question

My Express app is receiving a base64-encoded PNG from the browser  generated from canvas with toDataURL     and writing it to a file  But the file isn t a valid image file  and the  file  utility simply identifies it as  data    var body   req rawBody    base64Data   body replace   data image  png base64          binaryData   new Buffer base64Data   base64   toString  binary     require  fs   writeFile  out png   binaryData   binary   function err      console log err      writes out file without error  but it s not a valid image

User · Answer

Below function to save files  just pass your base64 file  it return filename save it in DB   import fs from  fs    const uuid   require  uuid v1       Download the base64 image in the server and returns the filename and path of image    function saveImage baseImage          path of the folder where your project is saved   In my case i got it from config file  root path of project         const uploadPath     home documents project         path of folder where you want to save the image      const localPath      uploadPath  uploads images          Find extension of file     const ext   baseImage substring baseImage indexOf      1  baseImage indexOf   base64         const fileType   baseImage substring  data   length baseImage indexOf              Forming regex to extract base64 data of file      const regex   new RegExp   data   fileType     ext  base64     gi          Extract base64 data      const base64Data   baseImage replace regex           const filename      uuid      ext           Check that if directory is present or not      if  fs existsSync    uploadPath  uploads               fs mkdirSync    uploadPath  uploads               if   fs existsSync localPath             fs mkdirSync localPath             fs writeFileSync localPath filename  base64Data   base64        return filename

User · Answer

I think you are converting the data a bit more than you need to  Once you create the buffer with the proper encoding  you just need to write the buffer to the file   var base64Data   req rawBody replace   data image  png base64          require  fs   writeFile  out png   base64Data   base64   function err      console log err         new Buffer       base64   will convert the input string to a Buffer  which is just an array of bytes  by interpreting the input as a base64 encoded string  Then you can just write that byte array to the file   Update  As mentioned in the comments  req rawBody is no longer a thing  If you are using express connect then you should use the bodyParser   middleware and use req body  and if you are doing this using standard Node then you need to aggregate the incoming data event Buffer objects and do this image data parsing in the end callback

User · Answer

You can use a third-party library like base64-img or base64-to-image    base64-img   const base64Img   require  base64-img     const data    data image png base64       const destpath    dir to save image   const filename    some-filename    base64Img img data  destpath  filename   err  filepath    gt          Asynchronous using  const filepath   base64Img imgSync data  destpath  filename      Synchronous using    base64-to-image   const base64ToImage   require  base64-to-image     const base64Str    data image png base64       const path    dir to save image       Add trailing slash const optionalObj     fileName   some-filename   type   png      const   imageType  fileName     base64ToImage base64Str  path  optionalObj      Only synchronous using

User · Answer

UPDATE  I found this interesting link how to solve your problem in PHP  I think you forgot to replace space by  as shown in the link   I took this circle from http   images-mediawiki-sites thefullwiki org 04 1 7 5 6204600836255205 png as sample which looks like      Next I put it through http   www greywyvern com code php binary2base64 which returned me   data image png base64 iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3 K pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA HocriOQAiC 1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp AnuwCoOUjhIvCvN59UBeoPZ AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5 49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y uy7b9GjP83l m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC   saved this string to base64 which I read from in my code   var fs        require  fs    data          fs readFileSync  base64    utf8    base64Data  binaryData   base64Data      data replace   data image  png base64         base64Data      base64Data replace            binaryData      new Buffer base64Data   base64   toString  binary     fs writeFile  out png   binaryData   binary   function  err        console log err      writes out file without error  but it s not a valid image       I get a circle back  but the funny thing is that the filesize has changed        END  When you read back image I think you need to setup headers  Take for example imagepng from PHP page    lt  php  im   imagecreatefrompng  test png     header  Content-Type  image png     imagepng  im   imagedestroy  im     gt    I think the second line header  Content-Type  image png     is important else your image will not be displayed in browser  but just a bunch of binary data is shown to browser   In Express you would simply just use something like below  I am going to display your gravatar which is located at http   www gravatar com avatar cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG and is a jpeg file when you curl --head http   www gravatar com avatar cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG  I only request headers because else curl will display a bunch of binary stuff Google Chrome immediately goes to download  to console   curl --head  http   www gravatar com avatar cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG  HTTP 1 1 200 OK Server  nginx Date  Wed  03 Aug 2011 12 11 25 GMT Content-Type  image jpeg Connection  keep-alive Last-Modified  Mon  04 Oct 2010 11 54 22 GMT Content-Disposition  inline  filename  cabf735ce7b8b4471ef46ea54f71832d jpeg  Access-Control-Allow-Origin    Content-Length  1258 X-Varnish  2356636561 2352219240 Via  1 1 varnish Expires  Wed  03 Aug 2011 12 16 25 GMT Cache-Control  max-age 300 Source-Age  1482       mkdir -p   tmp 6922728   cd   tmp 6922728    touch app js   app js  var app   require  express   createServer     app get      function  req  res        res contentType  image jpeg        res sendfile  cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG         app get   binary   function  req  res        res sendfile  cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG         app listen 3000      wget  http   www gravatar com avatar cabf735ce7b8b4471ef46ea54f71832d s 32 amp d identicon amp r PG    node app js

User · Answer

This did it for me simply and perfectly   Excellent explanation by Scott Robinson   From image to base64 string   let buff   fs readFileSync  stack-abuse-logo png    let base64data   buff toString  base64      From base64 string to image  let buff   new Buffer data   base64    fs writeFileSync  stack-abuse-logo-out png   buff

User · Answer

Converting from file with base64 string to png image   4 variants which works   var  promisify    require  util    var fs   require  fs     var readFile   promisify fs readFile  var writeFile   promisify fs writeFile   async function run            variant 1   var d   await readFile    1 txt    utf8     await writeFile    1 png   d   base64         variant 2   var d   await readFile    2 txt    utf8     var dd   new Buffer d   base64     await writeFile    2 png   dd        variant 3   var d   await readFile    3 txt     await writeFile    3 png   d toString  utf8     base64         variant 4   var d   await readFile    4 txt     var dd   new Buffer d toString  utf8     base64     await writeFile    4 png   dd      run

User · Answer

this is my full solution which would read any base64 image format and save it in the proper format in the database          Save base64 image to disk     try                  Decoding base-64 image            Source  http   stackoverflow com questions 20267939 nodejs-write-base64-image-file         function decodeBase64Image dataString                       var matches   dataString match   data   A-Za-z-       base64                    var response                  if  matches length     3                           return new Error  Invalid input string                           response type   matches 1             response data   new Buffer matches 2    base64               return response                        Regular expression for image type             This regular image extracts the  jpeg  from  image jpeg          var imageTypeRegularExpression                                      Generate random string         var crypto                            require  crypto            var seed                              crypto randomBytes 20           var uniqueSHA1String                  crypto                                                 createHash  sha1                                                    update seed                                                    digest  hex             var base64Data    data image jpeg base64  9j 4AAQSkZJRgABAQEAZABkAAD 4Q3zaHR0cDovL25zLmFkb2JlLmN               var imageBuffer                        decodeBase64Image base64Data           var userUploadedFeedMessagesLocation       img upload feed             var uniqueRandomImageName               image-    uniqueSHA1String             This variable is actually an array which has 5 values             The  1  value is the real image extension         var imageTypeDetected                  imageBuffer                                                  type                                                   match imageTypeRegularExpression            var userUploadedImagePath              userUploadedFeedMessagesLocation                                                   uniqueRandomImageName                                                                                                        imageTypeDetected 1               Save decoded binary image to disk         try                   require  fs   writeFile userUploadedImagePath  imageBuffer data                                    function                                                                        console log  DEBUG - feed message  Saved to disk image attached by user    userUploadedImagePath                                                         catch error                        console log  ERROR    error                        catch error                console log  ERROR    error

User · Answer

Easy way to convert base64 image into file and save as some random id or name      to create some random id or name for your image name const imgname   new Date   getTime   toString        to declare some path to store your converted image const path   yourpath png         image takes from body which you uploaded const imgdata   req body image          to convert base64 format into random filename const base64Data   imgdata replace   data   A-Za-z-      base64         fs writeFile path  base64Data   base64    err    gt        console log err           assigning converted image into your database req body coverImage   imgname

User · Answer

I also had to save Base64 encoded images that are part of data URLs  so I ended up making a small npm module to do it in case I  or someone else  needed to do it again in the future  It s called ba64   Simply put  it takes a data URL with a Base64 encoded image and saves the image to your file system  It can save synchronously or asynchronously  It also has two helper functions  one to get the file extension of the image  and the other to separate the Base64 encoding from the data  scheme prefix   Here s an example   var ba64   require  ba64        data url    data image jpeg base64  Base64 encoded image goes here        Save the image synchronously  ba64 writeImageSync  myimage   data url      Saves myimage jpeg      Or save the image asynchronously  ba64 writeImage  myimage   data url  function err       if  err  throw err       console log  Image saved successfully            do stuff       Install it  npm i ba64 -S  Repo is on GitHub  https   github com HarryStevens ba64   P S  It occurred to me later that ba64 is probably a bad name for the module since people may assume it does Base64 encoding and decoding  which it doesn t  there are lots of modules that already do that   Oh well

[image] How can I save a base64-encoded image to disk?

Examples related to image

Examples related to node.js

Examples related to base64

Examples related to binaryfiles