@hydrophobefireman/domshot
v0.0.2
Published
Take screenshots of the entire window or a particular DOM node.
Downloads
3
Readme
DomShot
Take screenshots of the entire window or a particular DOM node.
Uses promises all around, thus more performant for massive pages.
Installation
npm i @hydrophobefireman/domshot
API
DOMShot provides ES Module for JS.
1. Import DOMShot
(In your JS File)
import { DOMShot } from "DOMShot";
2. Choose the node to take screenshot of
Method 1
const shot = new DOMShot(document.documentElement,options?); // takes screenshot of the entire page
Method 2
const shot = new DOMShot().from(document.documentElement);
3. Take a screenshot
await shot.screenshot();
// get as data URI
const dataURI = await shot.toDataUri(type, quality);
// get as blob
const blob = await shot.toBlob(type, quality);
As DomShot clones and stores your entire dom in memory (likely 100s of nodes), calling screenshot clears both your real dom and the cloned nodes from memory.
To take screenshot again:
await shot.screenshot();
const dataURI = await shot.toDataUri(type, quality);
const blob = await shot.toBlob(type, quality);
shot.from(document.documentElement);
// do it all again
Options
DomShot accepts the following options related to external image loading
interface Options {
drawImgTagsOnCanvas: boolean; // tries to inline <img/> tags by drawing them on a canvas
timeout: number; // time (in ms) to wait for the external image to load defaults to 5 seconds
}
If you provide a large enough timeout value, DomShot will wait for all the images to load on the page. So, it's advisable to use a small timeout on very heavy pages
Todo
- Move to Worker if possible