If you want to take a Webpage screenshot or particular element like DIV then this tutorial will help you to get it done. Why do you want to take a screenshot of webpage? lets say if you want to

• Capture user’s data on part of the screen
• Capture Canvas Element
• Capture webpage and so on

You can get above things by using  html2canvas  javascript plugin. This script work well on the following browers

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Edge
• Safari 6+

You can download the screenshot image using filesaver.js plugin.

Install HTML2Canvas Javascript Screenshots Plugin

Place the below script before </body> tag of your html page

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

WebPage Screenshot in Javascript

Below code is used to get full page screenshot by passing  document.body  into html2canvas function.  toDataURL()  function is used to convert the canvas object into 64 bit encoded PNG image url. If you want image data URL to be in the jpeg format, you can pass image/jpeg as the first argument in the toDataURL() method.

html2canvas(document.body, {

onrendered: function(canvas)

{

var img = canvas.toDataURL();

$("#result-image").attr('src', img).show();

}

});

Capture HTML Element in Javascript

If you would like to capture only certain  DIV  in the webpage, you can use below code to get the HTML element screenshot by passing the element ID / Class using  document.querySelector(selectors)  method.

html2canvas(document.querySelector("#profileBox"), {

onrendered: function(canvas)

{

var img = canvas.toDataURL();

$("#result-image").attr('src', img).show();

}

});

Download Webpage Screenshot On Client-Side

Next step is to download the captured screenshot into our local machine.  FileSaver.js  is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client. read more from here – https://github.com/eligrey/FileSaver.js/

Please include the below script before </body> tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

html2canvas(document.body, {

onrendered: function(canvas)

{

canvas.toBlob(function(blob) {

saveAs(blob, "wholePage.png");

});

}

});

You can check the live demo below and understand how capturing webpage works using html2canvas plugin

Let me know if you get stuck anywhere in the process. And let me know what you think about this tutorial. Share your thoughts and experiences in the comments below!