Take screenshot of webpage with Html2Canvas

Html2Canvas is a JavaScript library that provides functionality to take screenshot of the whole web page or specific part.

It technically doesn’t take the screenshot but creates the view based on the available information on the page.

This returns HTML5 canvas element which you can use to show screenshot preview on the screen or create a new image file.

Take screenshot of webpage with html2canvas


Contents

  1. Download and Include
  2. Initialize
  3. Example 1
  4. Example 2
  5. Conclusion

 

1. Download and Include

  • Download the library from GitHub.
  • Include html2canvas.js script at the <head>.
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>

 

2. Initialize

Call html2canvas() method which takes selector as a parameter and with then handle canvas response.

html2canvas(document.body).then(function(canvas) {
 document.body.appendChild(canvas);
});

canvas.toDataURL()

This method returns the base64 value which you can use create image source or an image file.

html2canvas(document.getElementById('container')).then(function(canvas) {
 document.getElementById("image").src= canvas.toDataURL();
});

 

3. Example 1

Take the screenshot of the whole web page and show preview.

Completed Code

<!doctype html>
<html>
 <head>
  <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
 </head>
 <body>
  <h1>Take screenshot of webpage with html2canvas</h1>
  <div class="container" id='container' >
   <img src='images/image1.jpg' width='100' height='100'>
   <img src='images/image2.jpg' width='100' height='100'>
   <img src='images/image3.jpg' width='100' height='100'>
  </div>
  <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

  <!-- Script -->
  <script type='text/javascript'>
  function screenshot(){
    html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
   });
  }
  </script>

 </body>
</html>

 

4. Example 2

In this example, I am taking the screenshot of <div id='container'> content.

Completed Code

<!doctype html>
<html>
 <head>
  <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
 </head>
 <body>
  <h1>Take screenshot of webpage with html2canvas</h1>
  <div class="container" id='container' >
   <img src='images/image1.jpg' width='100' height='100'>
   <img src='images/image2.jpg' width='100' height='100'>
   <img src='images/image3.jpg' width='100' height='100'>
  </div>
  <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

  <!-- Script -->
  <script type='text/javascript'>
  function screenshot(){
   html2canvas(document.getElementById('container')).then(function(canvas) {
    document.body.appendChild(canvas);
   });
  }
  </script>

 </body>
</html>

 

5. Conclusion

This plugin allows us to take the screenshot on the client browser without server side interaction.

It might not able to generate the proper view if there is complex CSS applied on the elements.

Browser compatibility –

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+
Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *