Take screenshots of the entire window or a particular DOM node.
Uses promises all around, thus more performant for massive pages.
DOMShot provides ES Module for JS.
1. Import DOMShot
(In your JS File)
2. Choose the node to take screenshot of
const shot = documentdocumentElementoptions?); // takes screenshot of the entire page
const shot = ;
3. Take a screenshot
await shot;// get as data URIconst dataURI = await shot;// get as blobconst blob = await shot;
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;const dataURI = await shot;const blob = await shot;shot;// do it all again
DomShot accepts the following options related to external image loading
interface OptionsdrawImgTagsOnCanvas: boolean; // tries to inline <img/> tags by drawing them on a canvastimeout: 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
- Move to Worker if possible