HTML2Canvas

JavaScript to capture screenshots of complete or partial page
HTML2Canvas is a JavaScript API to capture full or partial screen shot of page rendered in browser.

It creates the view by traversing the DOM of the webpage. Technically it does not take the screenshot but simulate the view of the web page on the basis of DOM elements and it’s properties. It might not able to generate the proper view of element with CSS elements, which it does not understand.

As different browsers may display the same web page slightly differently, HTML2Canvas will maintain the difference while capturing the screenshot (generating the view).

Advantages

1- Allows to take partial or full screenshot
2- Allows can render the screenshot on client without server interaction
3- Provide mechanism to take on-demand screenshot on the client side
4- Generates the screenshot as per display of the web page in browser, in which we are taking the screenshot.

Limitations

1- Pages, which have frames containing pages from sources other than origin of the main page, are not displayed properly. Frames are grayed out.
2- Many CSS3 properties are not yet supported.
3- If the page being captured already has canvas element rendering the image from source other than the source of main page, the screenshot would not be able to display the canvas element properly.

Other options

Selenium is other option available in the market to take on demand screenshot on the client side. The key difference between these tools and HTML2Canvas is that these tools work on remote control mechanism and provide us option to remotely control the timing when we want to take the screenshot.

As these tools work on client server model, we will need selenium server running, which would be remotely controlling the client activity.

Selenium is best suited for automation testing than letting user given option to take the capture the screenshot and send on the need basis in the production environment.

Prerequisites

1- Knowledge of HTML and DOM model
2- Knowledge of JQuery

Demo application

References –

HTML2Canvas Home
Documentation
Uploading screenshot automatically to server
Downloads
Capturing screenshot from selenium

jsFeedback

jsFeedback is a implementation of html2canvas plugin to create a feedback mechanism for Web apps.
This is pretty much similar to the process behind Google feedback mechanism and how they are doing it!

This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page as mentioned above.

Example of Feedback form using jsFeedback plugin
(click the "Send Feedback" button situated at the bottom right corner of the web window.)

Browser compatibility

The script should work fine on the following browsers:

Firefox 3.5+
Newer versions of Google Chrome & Opera
As <IE9 does not support canvas, Flashcanvas or something similar would have to be used alongside this to make it compatible

Projects

jsFeedback implementation using html2canvas plugin (Tutorial)