Skip to main content

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?

Comments

Popular posts from this blog

Spring AOP : JDK Proxy vs CGLib Proxy

Spring framework is one of the most widely used framework in Enterprise application development. It has so many features such as Dependency injection, Data access integration, MVC, AOP which takes care of most of the boilerplate part of project, and developers can then focus on business logic only. One of the important feature in Spring is AOP. It is used by almost every enterprise application which is being developed using Spring. AOP So what is AOP? Definition of AOP - Aspect oriented programming is a programming paradigm which aims to increase modularity by allowing the separation of cross cutting concerns. Well, my understanding of AOP is - AOP allows us to introduce/join new modules in your project at pre-specified dynamic locations without having to code for it. Traditional examples of AOP is Transaction management, logging etc. You can read more about AOP at here . This article is for those who know AOP, have used AOP in their projects but do not know how Spring or o...

Notepad++ Compile and Run Java Programs

Notepad++ is a great file editor. It has many features. The most important feature which I like about Notepad++ is its light weight. It loads up so quickly, that's great. It also provides syntax highlighting for many languages. I use notepad++ to edit general files as well as my simple Java programs. Although notepad++ provides functionality to run external programs, I prefer NppJavaTools plugin to compile and run Java programs using notepad++. You can download NppJavaTools plugin from this page - NppJavaTools . Installation Installation of plugins in notepad++ is very simple process. All you have to do is copy plugin dll into plugins folder of notepad++ installation directory and restart the notepad++. Features This plugin provides following features, Compile and run your Java files within Notepad++ Set custom hotkeys for compiling and running Java Code Library support Compile and Run This function allows you to run your Java programs to compile and run from N...

Spring Custom Scope

Spring framework is one of the DI frameworks which is largely used to develop web applications(enterprise). It provides almost every feature which is required to develop a enterprise web application. Also it is extendable, so you can customize it the way it suits for your application. Custom bean scope Although bean scopes provided by Spring fulfills requirements of the application, some times you may need something different which is not available by default. In our application we faced the same situation. Requirement We had a requirement of the scope which uses an application value to decide which bean to use(return). The default scopes provided by Spring were not useful and was not providing the required functionality. Implementation As I said earlier, Spring is extendable. It provides an interface Scope, which you can implement to introduce custom scope in your application. To create custom scope, Scope interface needs to be implemented. Scope interface has ...