DEV Community

Cover image for Take Screenshot Of HTML Element Using JavaScript

Take Screenshot Of HTML Element Using JavaScript

bibekkakati profile image Bibek Originally published at Updated on ・2 min read

Hello everyone 👋

A few months back, I was working on a web-based project where a feature was required that is to take a screenshot of an HTML div in the browser and show it to the user. I was like, sorry this is not possible. Then I did some research and got to know about this library called html2canvas.

So in this article, I will show how can we capture a screenshot of a web page or any element of it using html2canvas.



Include the html2canvas.min.js file in your HTML file.

<script src="./html2canvas.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Now we will use the html2canvas method to capture the screenshot of our web page or the HTML element.

html2canvas(document.getElementById("main"), {
  allowTaint: true,
  useCORS: true,
.then(function (canvas) {
  // It will return a canvas element
  let image = canvas.toDataURL("image/png", 0.5);
.catch((e) => {
  // Handle errors
Enter fullscreen mode Exit fullscreen mode

The html2canvas method takes two arguments

  • first is the HTML element whose screenshot you want.
  • second is a configuration object.

In the configuration object, we are using

  • allowTaint to allow cross-origin images to taint the canvas.
  • useCORS to attempt to load images from a server using CORS.

You can find the available configuration options here.

Then we are converting the returned canvas into a base64 image URL using the toDataUrl method which expects two arguments

  • type : image format.
  • encodingOptions : number between 0 and 1 indicating the image quality.

And that's it, we captured the screenshot of our HTML element.


This library has some issues, some of them are mentioned in the docs. I recommend going through it and understand it before using it in any production-based environment.

If you are aware of other ways to achieve a similar kind of result, please feel free to share.


Check out the GitHub Repo.

Try it out here: Live.

Originally published on

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

If you like my work and want to support it, you can do it here. I will really appreciate it.

Discussion (6)

eissorcercode99 profile image
The EisSorcer

I don't understand. How is this commonly used?

ausginer profile image
Vlad Rindevich

I would think of using it in e2e tests.

bibekkakati profile image
Bibek Author

That could be a good use case @ausginer .

bibekkakati profile image
Bibek Author

I used it to show a smaller preview of a larger div section.

rajeshkumaryadavdotcom profile image
bibekkakati profile image
Bibek Author


Forem Open with the Forem app