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 other DI fra…

Java Tools Plugin for Notepad++

This post and the plugin is outdated. Please use plugin from this link which is updated and allows customization of shortcut key mappings and much more.
Notepad++ is a great free editor. I like notepad++ because its a light weight editor and loads instantly. I use notepad++ for editing many files everyday. One plugin I always wanted was a plugin which lets me compile my java files and execute them from editor itself, but I couldn't find it so I wrote a myself. This plugin can be downloaded from this link.
I am working on this plugin to make it more effective, so that if user have more than one installations of JDK or JRE then user should be able to choose which one to use etc.
This is a simple plugin which has two commands-
Compile - compiles a java file.
Run - executes a java file.
For using this plugin Java must be installed on the system.

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 CodeLibrary support Compile and RunThis function allows you to run your Java programs to compile and run from Notepad++. Set Custom hotkeysThi…