Skip to content
Related Articles

Related Articles

Improve Article

How to take screenshot of a div using JavaScript ?

  • Last Updated : 30 Jul, 2021

A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website. The below steps show the method to take a screenshot of a <div> element using JavaScript.

Step 1: Create a blank HTML document.
Step 2: Include the html2canvas library code by either using the downloaded file or using a link to a CDN version.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    How to take screenshot of
    a div using JavaScript?
  </title>
  
  <!-- Include from the CDN -->
  <script src=
  </script>
  
  <!-- Include locally otherwise -->
  <!-- <script src='html2canvas.js'></script> -->
</head>
<body>
    
</body>
</html>

Step 3: Create a <div> that has to be captured in the screenshot and give it an id so that it can be used later.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
  
    <!-- Include from the CDN -->
    <script src=
    </script>
  
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
  
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
</body>
  
</html>

Step 4: Create a button inside <div> element and use an “onclick” handler for the button.



HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
  
    <!-- Include from the CDN -->
    <script src=
    </script>
  
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
  
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
  
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
  
        <!-- Define the button 
        that will be used to 
        take the screenshot -->
        <button onclick="takeshot()">
            Take Screenshot
        </button>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
</body>
  
</html>

Step 5: The function to take the screenshot is defined inside the <script> tag. This function will use the html2canvas library to take the screenshot and append it to the body of the page.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
  
    <!-- Include from the CDN -->
    <script src=
    </script>
  
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
  
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
  
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
  
        <!-- Define the button 
        that will be used to 
        take the screenshot -->
        <button onclick="takeshot()">
            Take Screenshot
        </button>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
  
    <script type="text/javascript">
  
        // Define the function 
        // to screenshot the div
        function takeshot() {
            let div =
                document.getElementById('photo');
  
            // Use the html2canvas
            // function to take a screenshot
            // and append it
            // to the output div
            html2canvas(div).then(
                function (canvas) {
                    document
                    .getElementById('output')
                    .appendChild(canvas);
                })
        }
    </script>
</body>
  
</html>

The screenshot can be saved by right-clicking on it and saving it as an image, as shown below.

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :