Take Screenshots With Javascript (Simple Examples)

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.

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

 

 

QUICK NOTES

• Just a quick reminder to use http:// not file://.
• A copy of HTML2Canvas is not included in the zip file – Download the latest version from GitHub or load it from the CDN.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

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.

 

 

 

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, so html2canvas(document.getElementById("demo")) will only capture the demo 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.

 

 

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