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:
Posted by at

21 comments:

  2. 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

  3. @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

  4. 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

  6. 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

  7. Thank you greatly for this code.

    ReplyDelete

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

    http://bit.ly/Na5iAB

    ReplyDelete

  10. thanks men - this was a great help.
    danny

    ReplyDelete

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

    ReplyDelete

  14. 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

  15. @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

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

    ReplyDelete

  17. 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

  20. 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

Subscribe to: Post Comments (Atom)