How to Take Screenshot of a Div Using JavaScript?

Last Updated : 17 Jun, 2024

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.

Approach

In this approach, we will create a blank HTML document.
Include the html2canvas library code by either using the downloaded file or using a link to a CDN version.
Create a <div> that has to be captured in the screenshot and give it an id so that it can be used later.
Create a button inside <div> element and use an "onclick" handler for the button.
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.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>

    <!-- Include from the CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js">
    </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>

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

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.