Browser-capture-screenshot NPM

Browser Capture Screenshot

Browser Capture Screenshot utilises Element Capture API or Region Capture API to capture screenshot of a given Element from the page.

npm install browser-capture-screenshot

Demo

See demo at https://amoshydra.github.io/browser-capture-screenshot

preview

Usage

import { capture } from "browser-capture-screenshot";

const screenshot = await capture(demoElement);
previewElement.src = screenshot;

ScreenshotSession provides more granular controls:

import { ScreenshotSession } from "browser-capture-screenshot";

const session = new ScreenshotSession();

await session.start();

// capture screenshot 1 second later
setTimeout(async () => {
  const screenshot = await session.capture(demoElement);
  previewElement.src = screenshot;

  await session.stop();
}, 1000);

API

`capture`

A simplified API for capturing screenshot. This method uses ScreenshotSession internally.

export function capture(element: HTMLElement, options?: CaptureOptions): Promise<string>

return

A base64 encoded string representing the captured image wrapped in a Promise. e.g.: data:image/png;base64,iVBORw0K....

param `element`

The element HTMLElement to take screenshot of.

param `options`

optional.

param `options.api`

optional. Specify how the screenshot should be captured.

{ api: "element" } - uses Element Capture API
{ api: "region" } - uses Region Capture API

Default to using Element Capture API when not specified.

`ScreenshotSession`

export class ScreenshotSession {
  static isSupported(): boolean;
  start(): Promise<void>
  stop()
  capture(element: HTMLElement, options?: CaptureOptions): Promise<string>
}

Compatibility

This implementation requires the browser to support the following experimental API:

Notes:

When using Element Capture API:
- requires >= Chrome 132
- the target element need to be eligible for restriction
- the target element by default has a black background. If your element is tranparent, it will blend with a black background.
- The following style can be used with Element Capture API:
```
.target {
  background-color: white; /* provide a background */
  isolation: isolate; /* make target eligible for restriction */
}
```
The capture region need to be visible in the viewport
System UI (such as context menu) or User Agent widget (i.e. Date Picker, Select option list) will not be captured