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});
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:
labs/canvas2image/ .
See Also
For more information on saving canvas images to a server (using PHP) and then making
them available for users to download and save, see this blog post: http://blog.kevinsoo .
Search WWH ::

Custom Search