Ajax - HTML5 Canvas

Question

I've never used ajax before and I guess I'm struggling with the idea and how it works.

What I want to do:

I want to draw all over my canvas and hit save. Saving will send the dataURL to my mySQL database.

Hear is what I've read: This is impossible without Ajax

What I've found: Nothing to make me understand how this can work with Ajax.

To pull the dataURL (information drawn on the canvas) I'm currently trying to use the Signature-Pad lab to attempt to do what I want to do

If anyone will help me out it would be much appreciated. Whether it be working ajax code on how this can work, and idea on how it can work, or anything relative links.

Also, I'm using PHP and Javascript.

Answer 1

Please checkout this link.

http://www.permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

Answer 2

Create a <form action="post"> on the page with a hidden <input> element. When you want to upload the image, call canvas.toDataURL() which will return a string of image data in the format data:image/png;base64,… . Then set the value of the hidden input to that string and submit the form. On the server side, strip the data: header and Base64 decode the rest of the string, then save that string as you would with any other image data (eg, to a file).