How To 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.

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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes JS Screenshot Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Just a quick reminder to use http:// not file://.
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.

 

 

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

1-save.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

1-save.html
<!-- https://github.com/niklasvh/html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/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 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

2a-upload.html
<!-- (A) SCREENSHOT AREA -->
<div id="demo" style="background:#ffdbd9">
  <h1>TEST</h1>
  <input type="text" value="Dummy Text - Change and see how it captures below!"/>
</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

2a-upload.html
<!-- https://github.com/niklasvh/html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/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) => { return 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

2b-upload.php
<?php
// https://netcell.netlify.com/blog/2016/04/image-base64.html
$file = fopen("screenshot.jpeg", "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.

 

USEFUL 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

 

 

COMPATIBILITY CHECKS

These examples will work on any modern Grade A browser.

 

INFOGRAPHIC CHEATSHEET

How To Do Javascript Screenshot (Click To Enlarge)

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *