Take screenshot of webpage with Html2Canvas

Html2Canvas is a JavaScript library that allows you to take a screenshot of the entire web page or a specific section with just a few lines of code.

It returns an HTML5 canvas element when it is initialized on the element that you can use to create a new image file or display a screenshot preview on the screen.

In this tutorial, I show how you can use Html2Canvas library to take a screenshot and save it to the server using PHP.

Take screenshot of webpage with Html2Canvas


Contents

  1. Download and Include
  2. Initialize
  3. Example 1 – Full page screenshot
  4. Example 2 – Screenshot of specific area
  5. Example 3 – Save screenshot to the server
  6. 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 to create an image source or an image file.

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

3. Example 1 – Full page screenshot

Take a screenshot of the full page and show a 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 – Screenshot of specific area

In this example, I am taking a 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. Example 3 – Save screenshot to the server

HTML  –

Create a similar HTML layout as the above example and include the jQuery library.

Script –

Create screenshot() function where initialize html2canvas on the body. By default, html2canvas set the image background color to black if save the screenshot.

With the use of background: '#fff' set background white. Read the screenshot image base64 URL using canvas.toDataURL().

To save image to the server send AJAX POST request to ajaxfile.php where pass base64URL variable as data.

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><br/>
     <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
    
     <!-- Script -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <script type='text/javascript'>
     function screenshot(){
          html2canvas(document.body,{background: '#fff'}).then(function(canvas) {

               document.body.appendChild(canvas);

               // Get base64URL
               var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');

               // AJAX request
               $.ajax({
                    url: 'ajaxfile.php',
                    type: 'post',
                    data: {image: base64URL},
                    success: function(data){
                         console.log('Upload successfully');
                    }
               });
          });  
     }
     </script>
  </body>
</html>

AJAX file –

Create ajaxfile.php file and upload folder to store the screenshot taken using Html2canvas.

Read $_POST['image'] value and specify upload path in $location. Explode $image by ";base64," and decode base64 value using base64_decode().

Create a unique filename and pass the filename and base64 value to  file_put_contets() to store file on the server.

Completed Code

<?php 
$image = $_POST['image'];

$location = "upload/";

$image_parts = explode(";base64,", $image);

$image_base64 = base64_decode($image_parts[1]);

$filename = "screenshot_".uniqid().'.png';

$file = $location . $filename;

file_put_contents($file, $image_base64);

6. Conclusion

Html2Canvas is a highly versatile and efficient JavaScript library that allows you to take high-quality screenshots of any webpage with ease on the client browser without server-side interaction.

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

Browser compatibility –

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+
If you found this tutorial helpful then don't forget to share.