Upload Canvas Element To Webserver/database?

I'm searching for a good method to upload a canvas element from Firefox to a webserver or database to have the ability to reload it later. My ideas: 1. my first idea was to use get

Solution 1:

Canvas elements have a toDataURL function that serializes the image on the canvas as a PNG, encoded into a data URL. You could either post the image with a form (by setting a hidden input element's value to the data URL) or in the background using AJAX.

You should be aware that toDataURL (or any other method of getting the pixel data) will throw a security exception if the canvas is not "origin-clean". For example, if you ever call drawImage with an image from a different domain, you can no longer use the toDataURL or getImageData functions.

Solution 2:

I'm not too sure I would be worried about size unless images are typically > 10 mb in size. Is that really an issue?

If not, using getImageData() would be the most practical and simplest method IMO.