DEV Community

Cover image for Take Screenshot Of HTML Element Using JavaScript
Bibek
Bibek

Posted on • Updated on • Originally published at blog.bibekkakati.me

Take Screenshot Of HTML Element Using JavaScript

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.

Implementation

Code

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
  console.log(e);
});
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.

Important

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.

Example

Check out the GitHub Repo.

Try it out here: Live.


Originally published on blog.bibekkakati.me


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 (7)

Collapse
eissorcercode99 profile image
The EisSorcer

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

Collapse
ausginer profile image
Vlad Rindevich

I would think of using it in e2e tests.

Collapse
bibekkakati profile image
Bibek Author

That could be a good use case @ausginer .

Collapse
bibekkakati profile image
Bibek Author

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

Collapse
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com

Awesome!!!

Collapse
bibekkakati profile image
Bibek Author

Thanks!

Collapse
shash7 profile image
Shashwat amin

Is there any other robust alternative to html2canvas?