DEV Community

loading...
Cover image for Take Screenshot Of HTML Element Using JavaScript

Take Screenshot Of HTML Element Using JavaScript

bibekkakati profile image Bibek Originally published at blog.bibekkakati.me 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.

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

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
Collapse
bibekkakati profile image
Bibek Author

Thanks!

Forem Open with the Forem app