If you’re looking for a way to take screenshot of a web page or element using JavaScript, then this blog is for you. In this blog, you’ll learn how to take screenshots and download them easily in JavaScript using the html2canvas library.
As you know, screenshots can be a valuable and vital part of web applications. Screenshots are used for multiple purposes in the application. Companies like Google use them in their feedback form while getting feedback or report from users.
Let’s talk about how to use html2canvas library to take screenshots and download the screenshots directly on the user’s device. Remember, html2canvas will be used to capture screenshots only. To download screenshots, there will use JavaScript canvas.
To take a screenshot and download it using html2canvas & JavaScript, follow the given steps line by line.
Create an index.html file and paste the given codes. If you look carefully at the code, I’ve imported the html2canvas library before the closing of </head>. There are two buttons too, which are used to take screenshots and download the screenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Take Screenshot using JavaScript</title>
<!-- Imported html2canvas library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<!-- Dummpy data to take screenshot -->
<h1>Take Screenshot & Download it</h1>
<ul>
<li>This is a dummy list 1</li>
<li>This is a dummy list 2</li>
<li>This is a dummy list 3</li>
<li>This is a dummy list 4</li>
</ul>
<a href="#">Dummy Link</a>
<br>
<p>Click the specific button to take
<strong>screenshot</strong> or
<strong>download the screenshot</strong>
of this page.
</p>
<button id="take-src-only">Take Screenshot</button>
<button>Take Screenshot & Download</button>
<br><br>
<!-- Paste the script codes here -->
</body>
</html>
Once you do the above step. Paste the given codes before the closing of </body>.
<script>
const srcElement = document.querySelector("body"),
btns = document.querySelectorAll("button");
btns.forEach(btn => { // looping through each btn
// adding click event to each btn
btn.addEventListener("click", () => {
// creating canvas of element using html2canvas
html2canvas(srcElement).then(canvas => {
// adding canvas/screenshot to the body
if(btn.id === "take-src-only") {
return document.body.appendChild(canvas);
}
// downloading canvas/screenshot
const a = document.createElement("a");
a.href = canvas.toDataURL();
a.download = "screenshot.jpg";
a.click();
});
});
});
</script>
That’s all, now you are ready to take a screenshot of the web page and download it. In the codes, I’ve passed the body as a screenshot element, but you can pass any element and capture a screenshot of it according to your requirement.
Conclusion
html2canvas doesn’t actually take a screenshot of the web page. It builds a representation of the page based on the properties it reads from the DOM and returns the canvas as an image. So, the image it returns may not be 100% accurate as compared to the original page. Read more about the html2canvas library.
If you don’t know, you can also capture screenshots with pure JavaScript. For more, read this blog: How to Take Screenshots in Vanilla JavaScript.
