Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/capture-all
Flexible utility to get screenshots from Web pages
https://github.com/ktsn/capture-all
capture image puppeteer screenshot snapshot
Last synced: about 2 months ago
JSON representation
Flexible utility to get screenshots from Web pages
- Host: GitHub
- URL: https://github.com/ktsn/capture-all
- Owner: ktsn
- License: mit
- Created: 2018-03-05T05:40:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-09T10:03:51.000Z (2 months ago)
- Last Synced: 2024-11-14T13:52:08.161Z (2 months ago)
- Topics: capture, image, puppeteer, screenshot, snapshot
- Language: TypeScript
- Size: 829 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# capture-all
Flexible utility to get screenshots from Web pages
## Install
```sh
$ npm i capture-all
# or
$ yarn add capture-all
```
## Example
```js
const { captureAll } = require('capture-all')
const fs = require('fs')
captureAll([
{
// Web page URL which will be captured
url: 'https://www.google.com/',
// Selector for capturing element
target: 'body',
// Selectors to hide from capture (add `visibility: hidden;` to the elements)
hidden: ['#gb'],
// Selectors to remove from capture (add `display: none;` to the elements)
remove: ['#fbar'],
// Delay (milliseconds) before taking screenshot
delay: 3000,
// Viewport size of a browser
viewport: {
width: 1024,
height: 800
}
}
]).then(results => {
results.forEach((result, i) => {
fs.writeFileSync(`result-${i}.png`, result.image)
})
})
```
## Hooking Capturing Processing
You can define detailed behavior of the capturing processing with `capture` option. The `capture` option is an function receving [Puppeteer's `Page` instance](https://github.com/puppeteer/puppeteer/blob/v5.2.1/docs/api.md#class-page) as the 1st argument and a capturing function as the 2nd argument. You have to call the 2nd argument function by your hand when you specify `capture` option.
```js
const { captureAll } = require('capture-all')
const fs = require('fs')
captureAll([
{
url: 'https://www.google.com/',
target: 'body',
viewport: {
width: 1024,
height: 800
},
// Define the behavior around capturing
capture: async (page, capture) => {
// Click a button in the page by using Puppeteer API
const button = await page.$('#some-button')
await button.click()
// Capture the page at this moment
await capture()
// Click the button again
await button.click()
// Capture the page again
await capture()
}
}
]).then(results => {
results.forEach((result, i) => {
fs.writeFileSync(`result-${i}.png`, result.image)
})
})
```
## API
### `captureAll(targets: CaptureTarget[], options?: CaptureOptions): Promise`
Capture screenshots of Web pages which specified by `targets` and return an array of `CaptureResult` object including captured image buffer.
`CaptureTarget` may have the following properties:
* `url`: Web page URL which will be captured (required)
* `target`: a selector for capturing element
* `hidden`: an array of selector to hide matched elements from captured image
* `remove`: an array of selector to remove matched elements from captured image
* `disableCssAnimation`: `true` if css animations / transitions are to be disabled. (default: `true`)
* `delay`: Delay (milliseconds) before taking screenshot
* `viewport`: viewport size of browser
* `capture`: You can hook the capturing processing by using this option. See [Hooking Capturing Processing](#hooking-capturing-processing) for details.
`CaptureOptions` may have the following properties:
* `concurrency`: a number of process which will be created for capture
* `puppeteer`: an object passed to [`puppeteer.launch`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
`CaptureResult` has the following properties:
* `index`: Index of capture results generated by the same `CaptureTarget`. The result can be more than one if you specify `capture` option.
* `image`: captured image buffer
* `url`: captured Web page URL
* `target`: a selector of captured element
* `hidden`: an array of selector which is hidden from captured image
* `remove`: an array of selector which is removed from captured image
* `disableCssAnimation`: `true` if css animations / transitions are to be disabled
* `delay`: Delay (milliseconds) before taking screenshot
* `viewport`: viewport size of browser
### `createCaptureStream(targets: CaptureTarget[], options?: CaptureOptions): ReadableStream`
Similar to `captureAll` but returns readable stream of `CaptureResult` instead.
## License
MIT