How to save a PNG image server-side from a base64 data string

Question

I m using Nihilogic s  Canvas2Image  JavaScript tool to convert canvas drawings to PNG images   What I need now is to turn those base64 strings that this tool generates  into actual PNG files on the server  using PHP   In short  what I m currently doing is to generate a file on the client side using Canvas2Image  then retrieve the base64-encoded data and send it to the server using AJAX      Generate the image file var image   Canvas2Image saveAsPNG canvas  true       image id    canvasimage   canvas parentNode replaceChild image  canvas    var url    hidden php   data       canvasimage   attr  src       ajax        type   POST        url  url      dataType   text       data            base64data   data             At this point   hidden php  receives a data block that looks like data image png base64 iVBORw0KGgoAAAANSUhEUgAABE     From this point on  I m pretty much stumped  From what I ve read  I believe that I m supposed to use PHP s imagecreatefromstring function  but I m not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server  Please aid

User · Answer

It s simple    Let s imagine that you are trying to upload a file within js framework  ajax request or mobile application  Client side    Firstly you send a data attribute that contains a base64 encoded string  In the server side you have to decode it and save it in a local project folder    Here how to do it using PHP   lt  php    base64String    kfezyufgzefhzefjizjfzfzefzefhuze      I put a static base64 string  you can implement you special code to retrieve the data received via the request    filePath     MyProject public uploads img test png    file put contents  filePath  base64 decode  base64String       gt

User · Answer

Taken the  dre010 idea  I have extended it to another function that works with any image type  PNG  JPG  JPEG or GIF and gives a unique name to the filename  The function separate image data and image type  function base64ToImage  imageData        data    data image png base64 AAAFBfj42Pj4       list  type   imageData    explode       imageData       list   extension    explode      type       list   imageData         explode       imageData        fileName   uniqid        extension       imageData   base64 decode  imageData       file put contents  fileName   imageData

User · Answer

This function should work  this has the photo parameter that holds the base64 string and also path to an existing image directory should you already have an existing image you want to unlink while you save the new one      public function convertBase64ToImage  photo   null   path   null        if   empty  photo              photo   str replace  data image png base64         photo            photo   str replace            photo            photo   str replace  data image jpeg base64         photo            photo   str replace  data image gif base64         photo            entry   base64 decode  photo            image   imagecreatefromstring  entry             fileName   time       jpeg            directory    uploads customer      fileName           header  Content-type image jpeg             if   empty  path                 if  file exists  path                     unlink  path                                     saveImage   imagejpeg  image   directory            imagedestroy  image            if   saveImage                return  fileName            else               return false     image not saved

User · Answer

I had to replace spaces with plus symbols str replace            img   to get this working   Here is the full code   img     POST  img       Your data  data image png base64 AAAFBfj42Pj4    img   str replace  data image png base64         img    img   str replace            img    data   base64 decode  img   file put contents   tmp image png    data     Hope that helps

User · Answer

If you want to randomly rename images  and store both the image path on database as blob and the image itself on folders this solution will help you  Your website users can store as many images as they want while the images will be randomly renamed for security purposes  Php code Generate random varchars to use as image name  function genhash  strlen             h len    len           cstrong   TRUE           sslkey   openssl random pseudo bytes  h len   cstrong           return bin2hex  sslkey      randName   genhash 3     You can increase or decrease length of the image name  1  2  3 or more     Get image data extension and base 64 part  part after data image png base64   from image    pos    strpos  base64 img         imgExten   explode      substr  base64 img  0   pos   1    extens     jpg    jpe    jpeg    jfif    png    bmp    dib    gif      if in array  imgExten   extens          imgNewName    randName         imgExten      filepath    quot resources images govdoc  quot   imgNewName      fileP   fopen  filepath   wb        imgCont   explode       base64 img      fwrite  fileP  base64 decode  imgCont 1        fclose  fileP           gt   filepath  lt   This path will be stored as blob type in database    base64 decoded images will be written in folder too     Please don t forget to up vote if you like my solution

User · Answer

It worth to say that discussed topic is documented in RFC 2397 - The  data  URL scheme  https   tools ietf org html rfc2397   Because of this PHP has a native way to handle such data -  data  stream wrapper   http   php net manual en wrappers data php   So you can easily manipulate your data with PHP streams    data    data image gif base64 R0lGODlhEAAOALMAAOazToeHh0tLS 7LZv 0jvb29t f3  Ub  ge8WSLf rhf 3kdbW1mxsbP  mf   yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj gAwXEQA7     source   fopen  data   r     destination   fopen  image gif    w     stream copy to stream  source   destination    fclose  source   fclose  destination

User · Answer

This code works for me check below code    lt  php define  UPLOAD DIR    images      image parts   explode   base64      POST  image      image type aux   explode  image     image parts 0     image type    image type aux 1    image base64   base64 decode  image parts 1     file   UPLOAD DIR   uniqid       png   file put contents  file   image base64     gt

User · Answer

based on drew010 example I made a working example for easy understanding   imagesaver  data image jpeg base64  9j 4AAQSkZJ      use full base64 data   function imagesaver  image data        list  type   data    explode       image data      exploding data for later checking and validating       if  preg match    data image    w   base64      image data   type              data   substr  data  strpos  data         1            type   strtolower  type 1       jpg  png  gif          if   in array  type     jpg    jpeg    gif    png                    throw new  Exception  invalid image type                        data   base64 decode  data            if   data     false                throw new  Exception  base64 decode failed                    else           throw new  Exception  did not match data URI with image data                fullname   time    type       if file put contents  fullname   data             result    fullname       else           result     error                it will return image name if image is saved successfully      or it will return error on failing to save image         return  result

User · Answer

You need to extract the base64 image data from that string  decode it and then you can save it to disk  you don t need GD since it already is a png   data    data image png base64 AAAFBfj42Pj4    list  type   data    explode       data   list    data         explode       data    data   base64 decode  data    file put contents   tmp image png    data    And as a one-liner   data   base64 decode preg replace    data image  w  base64  i        data     An efficient method for extracting  decoding  and checking for errors is  if  preg match    data image    w   base64      data   type          data   substr  data  strpos  data         1        type   strtolower  type 1       jpg  png  gif      if   in array  type     jpg    jpeg    gif    png                throw new  Exception  invalid image type               data   str replace             data         data   base64 decode  data        if   data     false            throw new  Exception  base64 decode failed            else       throw new  Exception  did not match data URI with image data       file put contents  quot img   type  quot    data

User · Answer

Total concerns    data    data image png base64 AAAFBfj42Pj4       Extract base64 file for standard data  fileBin   file get contents  data    mimeType   mime content type  data       Check allowed mime type if   image png    mimeType        file put contents  name png    fileBin          http   php net manual en wrappers data php      http   php net manual en function mime-content-type php

User · Answer

Well your solution above depends on the image being a jpeg file  For a general solution i used   img     POST  image     img   substr explode      img  1   7   file put contents  img png   base64 decode  img

User · Answer

One-linear solution    base64string    data image png base64 R0lGODlhEAAOALMAAOazToeHh0tLS 7LZv 0jvb29t f3  Ub  ge8WSLf rhf 3kdbW1mxsbP  mf   yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj gAwXEQA7   file put contents  img png   base64 decode explode      base64string  1

User · Answer

Try this   file put contents  img png   base64 decode  base64string      file put contents docs

User · Answer

PHP has already a fair treatment base64 -  file transform  I use to get it done using this way    blob   POST  blob       base64 coming from an url  for example  blob file get contents  blob    fh fopen  myfile png   w       be aware  it ll overwrite  fwrite  fh  blob   fclose  fh   echo   lt img src myfile png gt       just for the check

User · Answer

try this      file     POST  file      your data in base64  data image png        img   str replace  data image png base64         file   file put contents  img imag png   base64 decode  img

[php] How to save a PNG image server-side, from a base64 data string

Examples related to php

Examples related to javascript

Examples related to base64

Examples related to html5-canvas