Saturday, February 26, 2011

Save a Base64 Encoded Canvas image to a png file using PHP

This and the next post will demonstrate how to draw on a canvas and then save the file on a server using PHP. Here is the very simple server side code:



The next post will be the slightly more complicated front-end code. This was particularly designed for a Sencha Touch iPad app that will allow people to sign with their finger. It has some flaws, but the basics are pretty reusable and good!

Your result may look something like this:

49 comments:

  1. Weird, this is not working for me. I get a blank .png file. I am using the jQuery Webcam Plugin for the canvas. When I print out my Base64 encoded data it looks fine to me. It even has that beginning few characters that you strip out.

    Any ideas?

    ReplyDelete
  2. @murko. all i can say is to check the http://www.xarg.org/project/jquery-webcam-plugin/ docs for their suggestion about how to do it. they're using flash and doing their own things with the canvas. it's possible they use more than one canvas, make sure you're grabbing data from the correct one.

    Please check out some of these examples: http://www.nihilogic.dk/labs/canvas2image/

    ReplyDelete
  3. you saved my day !

    actually this one was not working for me:

    http://wiki.phonegap.com/w/page/39539478/Upload%20an%20Image%20to%20a%20PHP%20Script

    thx

    ReplyDelete
  4. Please send me a code to capture the image form webcam and should store that image in database using PHP and Flex 4.5 .Waiting for a good response from u people. Thx in advance.

    ReplyDelete
  5. Thank you greatly for this code.

    ReplyDelete
  6. Cool post, Jamund. I got inspired that I made a whole phonegap plugin. See below. Ciao.

    http://bit.ly/Na5iAB

    ReplyDelete
  7. thanks men - this was a great help.
    danny

    ReplyDelete
  8. What does the $_POST['img'] string contain?

    ReplyDelete
  9. I'm trying to do this exact task but client-side (in an Android app, in case they are offline). I have the Base64 encoded PNG in a JSONArray in my Java code, but haven't figured out how to turn that into an actual .PNG file to save on the user's phone/tablet. Any suggestions?

    ReplyDelete
  10. @Erin, not exactly what you're looking for, but you might want to check this out: http://thomasjbradley.ca/lab/signature-pad/

    @Einar, it would contain the base64 encoding of the PNG image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA6IAAAEOC.................and on and on......."

    @Jamund! Thanks!

    ReplyDelete
  11. Thank you man, that's incredibly simple and neat!

    ReplyDelete
  12. This just saved me so much time. Thanks for putting this together. The logic you use is easy to understand as well, so +1 for making it readable!

    ReplyDelete
  13. Thank you so much sir, you helped a lot !

    However, this code didn't work the first time I runned it. I had to change the permission on my folder, so that the function file_put_contents could work.

    Have a great day

    ReplyDelete
  14. Thanks!
    missing this line almost made me crazy:
    $img = str_replace(' ', '+', $img);

    ReplyDelete
  15. Thank you so much !
    I have been looking for something like this for days and couldn't figure out why my code wasn't working.

    ReplyDelete
  16. Thank a lot sir. It helped me a lot.

    ReplyDelete
  17. Nice post, thanks so much, this helpul for me!

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. SO easy! Thank you...I've been looking everywhere for this.

    ReplyDelete
  20. Works a charm! Thank you for posting!!

    ReplyDelete
  21. my image create doesn't open :(

    ReplyDelete
    Replies
    1. ready !! ... thank you :) , i had syntax error

      Delete
  22. Fact!!! Thanks for sharing complete point…one more company has articles about Webdesign Agenter website pixo web design.

    ReplyDelete
  23. Your argument is excellent!! Unique points in the same, here one more website I like joomla development company.

    ReplyDelete
  24. I really appreciated with your content and completely agree with you, here also I was visit a company website Digital zona.

    ReplyDelete
  25. brilliant bro!!!nice work..thanks a lot for help me out.

    ReplyDelete
  26. how can i decode multiple base64 images and upload into a folder?

    ReplyDelete
  27. Thank you !...
    this helped me a lot :-)

    ReplyDelete
  28. this is not working for me. I get a blank .png file. I try to save image which produce by canvas .any ideas??

    ReplyDelete
  29. This is what I was looking for. Thanks !

    ReplyDelete
  30. thanks , I spent several hours trying to solve the problem of file data transfer via AJAX

    ReplyDelete