Canvas - HTML5 - page 218

HTML and CSS Reference

In-Depth Information

var canvas = $("canvas", my_graph)[0];

var image_data = canvas. toDataURL ("image/png");

Now that you have the raw image data, you can save the image data as you please.

For instance, to send the image data to a server via Ajax, using jQuery, you might use:

$.post("http://location/path/to/upload", {data: image_data});

Discussion

The easy part is extracting the raw image data from the element. The hard part is saving

that raw data to an actual file.

If you want to save the file back to a server, you can easily send the data to the server

as a string value using Ajax. Once the data arrives on the server, you have to parse out

the dataURI format, base64-decode the image data, and save that information to a file.

If you wanted to then let a user save that file to his computer, you could tell the browser

to download the file you just created, which would then prompt the user to save the

file on his system.

Some very recent releases of browsers are supporting local file access, so that you can

(in theory) allow a user to save the image to his own computer without needing to first

upload it to a server and then re-download it.

Because the process of actually handling these files in this way is rather complex (and

beyond the scope of this chapter), you may want to instead use a tool like Canvas2Im-

age, which takes care of much of this difficult stuff for you: http://www.nihilogic.dk/

labs/canvas2image/ .