Take webpage screenshot using HTML5 and jQuery

In this post, you will find various solutions and ideas about how to take or capture webpage screenshot using HTML5 Canvas, jQuery and Javascript. This is quite useful feature as you can allow their end users to report about any errors, feedback or suggestion with webpage screenshot.

I had previously posted about other HTML5 related post like HTML 5 based text editor plugin, Top & Best 5 Free HTML 5 audio player and Upload files Gmail style using jQuery and HTML 5. In this post, you will find jQuery plugins and JavaScript techniques to take webpage screenshot.

1. Feedback.js

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.

The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send.

It does not require any rendering from the server, as the whole image is created on the clients browser.

2. Html2Canvas

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work.

3. Take Screenshot with HTML5 and JavaScript

This article explains how to take webpage screenshot using HTML5 and JavaScript code only. Yes you have read it correct its using HTML5 and JavaScript only. :). You can check the live demo here.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..