Upload canvas element to webserver/database?

Question

Hi,

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 getImageData() and save the canvas as an ImageData object to the database, but this might not a good solution because these objets can get quite large. 2. second idea is to use a Flash/Javascript method to upload the canvas as an PNG to the webserver.

Do you have any comments on these methods or maybe have another good solution?

Answer 1

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.

Answer 2

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.