Welcome to a tutorial and examples on how to take screenshots with Javascript. So you have a certain project that needs to do screenshots. Maybe for an automated error report, so users don’t have to do all those crazy shortcut keys, paste the image, save and send an email.
An easy way to capture screenshots in Javascript is to use the html2canvas library.
html2canvas(document.body).then(canvas => {
let a = document.createElement("a");
a.download = "ss.png";
a.href = canvas.toDataURL("image/png");
a.click();
});
That’s all, but read on for more examples!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
- Just a quick reminder to use
http://
notfile://
. - A copy of HTML2Canvas is not included in the zip file – Download the latest version from GitHub or load it from the CDN.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
JAVASCRIPT SCREENSHOTS
All right, let us now get into the examples of how to take screenshots in Javascript.
EXAMPLE 1) SCREENSHOT & SAVE
1A) THE HTML
<h1>TEST</h1>
<textarea>Dummy Text - Change and see how it captures below!</textarea>
<input type="button" value="Capture" onclick="capture()">
Nothing special here actually. Just some dummy elements to work with the screenshot.
1B) THE JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/LATEST-VERSION/html2canvas.min.js"></script>
<script>
function capture () {
html2canvas(document.body).then(canvas => {
let a = document.createElement("a");
a.download = "ss.png";
a.href = canvas.toDataURL("image/png");
a.click(); // MAY NOT ALWAYS WORK!
});
}
</script>
Yep, this is exactly the same as the snippet in the introduction. A couple of extra notes though:
- Apart from
canvas.toDataURL("image/png")
, we can also set it to("image/jpeg", QUALITY)
, or("image/webp", QUALITY)
.QUALITY
is a number from 0 to 1, 0 being the lowest and 1 being the highest. a.click()
may not always work because of security restrictions. It is best to just append this link on the page, and let users manually click to save the screenshot.
EXAMPLE 2) SCREENSHOT & UPLOAD TO SERVER
2A) THE HTML
<!-- (A) SCREENSHOT AREA -->
<div id="demo" style="background:#ffdbd9">
<h1>TEST</h1>
<textarea>Dummy Text - Change and see how it captures below!</textarea>
</div>
<!-- (B) WILL NOT BE CAPTURED -->
<p>This will not be screen captured.</p>
<input type="button" value="Capture" onclick="capture()">
In this example, we will switch things up a little. As you can see, we are no longer capturing the entire page, but only the demo
section.
2B) THE JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/LATEST-VERSION/html2canvas.min.js"></script>
<script>
function capture () {
html2canvas(document.getElementById("demo")).then(canvas => {
// (A) APPEND SCREENSHOT TO DATA OBJECT
var data = new FormData();
data.append("screenshot", canvas.toDataURL("image/jpeg", 0.6));
// (B) UPLOAD SCREENSHOT TO SERVER
fetch("2b-upload.php", { method:"post", body:data })
.then(res => res.text())
.then(txt => alert(txt));
});
}
</script>
html2canvas(document.body)
will capture the entire page, sohtml2canvas(document.getElementById("demo"))
will only capture thedemo
section.- We are uploading the image to the server using
fetch()
now, instead of offering a “save as”.
2C) SERVER-SIDE SCRIPT
<?php
// https://netcell.netlify.com/blog/2016/04/image-base64.html
$file = fopen("screenshot.jpg", "w");
$data = explode(",", $_POST["screenshot"]);
$data = base64_decode($data[1]);
fwrite($file, $data);
fclose($file);
echo "OK";
This one is in PHP, but you can pretty much “translate” it to whatever other language you are using. Just save the uploaded screenshot into a file, that’s all. You can even send out an email if you want.
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- HTML2Canvas – GitHub
- Canvas to data URL – MDN
- Need to capture Javascript errors as well? Check out this blog post on Sentry.
- Example on CodePen – Javascript Screenshot
COMPATIBILITY CHECKS
- Arrow Functions – CanIUse
- Canvas – CanIUse
These examples will work on any modern Grade A browser.
INFOGRAPHIC CHEATSHEET

THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!