@xata.io/screenshot
This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.
Demos
Pick your preference. You can easily learn about this project in the following ways:
- Watch an explainer on YouTube.
- See it in action on StackBlitz. You'll need to open the preview in a new window to get around extra iframe security that StackBlitz needs.
- Read about the details on the Xata Blog.
Usage
First, you'll want to install it:
npm install @xata.io/screenshot
Then, you can add it to your app and use it like so:
{
/**
* This is a base64-encoded string representing your screenshot.
* It can go directly into an ![]()
's `src` attribute, or be sent to a server to store.
*/
console.log(screenshot);
});
}">
import { takeScreenshot, checkIfBrowserSupported } from "@xata.io/screenshot"; /** * Only do this if your browser supports it. * To check, visit https://caniuse.com/mdn-api_mediadevices_getdisplaymedia */ if (checkIfBrowserSupported()) { takeScreenshot().then((screenshot) => { /** * This is a base64-encoded string representing your screenshot. * It can go directly into an's `src` attribute, or be sent to a server to store. */ console.log(screenshot); }); }
Options
takeScreenshot accepts a few options to help you customize the user flow and the resulting image. These are:
| Option | Description | Required | Default Value |
|---|---|---|---|
quality |
The quality of the final image on a scale of 0 to 1. 0 is lowest quality, 1 is highest. | nope | .7 |
onCaptureStart |
An async function that does stuff when the capture starts. You'll usually want to hide any modals or anything here. |
nope | |
onCaptureEnd |
An async function that does stuff after capture ends. This is usually when you'll want to clean up. |
nope | |
type |
What kind of image do we want? Possible values are "image/jpeg", "image/png" and "image/webp". |
nope | "image/jpeg" |
soundEffectURL |
Why not play a little camera click sound effect when taking a screenshot? | nope | - |
Contributing
You're always welcome to open an issue if you encounter any, or even better, open a PR directly to solve issues. We don't (yet) have more contributing guidelines than this because the project is quite small. This may change as things develop.
Made with
13 Dec 26, 2022
5 Oct 8, 2022
24 Nov 7, 2022
7 Oct 15, 2022
1 Jan 27, 2022
12 Nov 15, 2022
6 Jan 1, 2023
10 Aug 22, 2022
40 Dec 21, 2022
2 Jan 10, 2022