Take webpage screenshot using HTML5 and jQuery
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.
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.
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.
