How to take screenshot of a div using JavaScript ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.