DEV Community

Cover image for Take Screenshot Of HTML Element Using JavaScript

Take Screenshot Of HTML Element Using JavaScript

Bibek on May 10, 2021

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 ...
Collapse
 
shash7 profile image
Shash •

Is there any other robust alternative to html2canvas?

Collapse
 
e78230c36501509 profile image
cwtuan • • Edited
  • html2canvas: The popular one. It works by reading your webpage's HTML and styles and redrawing it onto a element, making it easy to capture as an image. Note: Despite its high download count, the author considers it an experimental tool and advises against using it in production.

  • html-to-image: A newer, often faster alternative. It uses modern browser features and offers a promise-based API. Support different formats like PNG, JPEG, SVG.

  • dom-to-image: An old library converting parts of your webpage (DOM nodes) into images.

  • screenshot-desktop: it's for capturing screenshots of your actual computer screen (desktop, windows, monitors) and is meant to run in Node.js environments, not directly in the browser.

Collapse
 
dashpilot profile image
Dashpilot •

There’s also github.com/bubkoo/html-to-image

Collapse
 
chris_hayes profile image
Chris Hayes •

html-to-image worked better for me. The screenshots from html2canvas had styling issues where it didn't match what the page was showing. html-to-image was pretty much 1-for-1, the one thing I had to do was put a background color on the element I was imaging, or else it defaults to transparent regardless of what's behind the element.

Collapse
 
tinchox5 profile image
Juan Martin •

SnapDOM is new and well maintained

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav •

Awesome!!!

Collapse
 
bibekkakati profile image
Bibek •

Thanks!

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 •

That could be a good use case @ausginer .

Collapse
 
bibekkakati profile image
Bibek •

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

Collapse
 
shyamdadhaniya_89 profile image
Shyam-Dadhaniya •

can we take the full webpage screenshot using html2Canvas?