screenshot-with-selection
Fork of @xataio/screenshot with enhancement of capture selected area 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 screenshot-with-selection
Then, you can add it to your app and use it like so:
import {
takeScreenshot,
checkIfBrowserSupported,
} from "screenshot-with-selection";
/**
* 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 <img>'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 | - |
height |
Height of selection area or the area you want to capture | nope | - |
width |
Width of selection area or the area you want to capture | nope | - |
x |
coordinate x of the starting point of selection area or the area you want to capture | nope | - |
y |
coordinate y of the starting point of selection area or the area you want to capture | 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.
Forked with ❤️ in India.