Tuesday, April 26, 2011

HTML Canvas To Image

HTML 5 is one of the hot topics in Web Development, because it introduced many new tags..
You can get more information about new tags in HTML 5 at here.
This post is about how can you generate image from Canvas tag in HTML 5.





Though there are some of the JavaScript Libraries on web which can generate image from canvas, I am posting the way which I think is very easy to create an image from canvas.
From http://www.w3.org
url = canvas . toDataURL( [ type, ... ])

Returns a data: URL for the image in the canvas.
The first argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given type isn't supported. The other arguments are specific to the type, and control the way that the image is generated, as given in the table below.

Using toDataURL and window.open method we can generate image from canvas element.
Following code does it for you-
var canvas=document.getElementById("canvasID");
window.open(canvas.toDataURL());
Simple, isn't it?

No comments:

Post a Comment

Ads Inside Post