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
        http://html2canvas.hertzen.com/screenshots.html

References –

HTML2Canvas Home - http://html2canvas.hertzen.com/index.html

Documentation - http://html2canvas.hertzen.com/documentation.html

Uploading screenshot automatically to server - http://stackoverflow.com/questions/9250505/how-to-upload-a-screenshot-using-html2canvas

Downloads - https://github.com/niklasvh/html2canvas

Capturing screenshot from selenium - http://www.cloudtesting.com/blog/2009/06/24/capturing-screen-shots-of-browsers-with-selenium-and-cloud-testing-part-1/