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:
