How to take screenshot of a div using JavaScript ?

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="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">  </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="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/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>    </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="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/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></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="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/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>
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.
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.