capture-website

Capture screenshots of websites

Browser automationScreenshot
sindresorhus/capture-websitecapture-website

README

capture-website


Capture screenshots of websites


It uses Puppeteer (Chrome) under the hood.

See capture-website-cli for the command-line tool.

Install


  1. ```sh
  2. npm install capture-website
  3. ```

Note to Linux users: If you get a sandbox-related error, you need to enable system sandboxing.

Usage


  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('https://sindresorhus.com', 'screenshot.png');
  5. ```

API


captureWebsite.file(input, outputFilePath, options?)


Capture a screenshot of the given input and save it to the given outputFilePath.

Intermediate directories are created for you if they do not exist.

Returns a `Promise` that resolves when the screenshot is written.

captureWebsite.buffer(input, options?)


Capture a screenshot of the given input.

Returns a `Promise` with the screenshot as binary.

captureWebsite.base64(input, options?)


Capture a screenshot of the given input.

Returns a `Promise` with the screenshot as [Base64](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding).

input


Type: string

The URL, file URL, data URL, local file path to the website, or HTML.

  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('index.html', 'local-file.png');
  5. ```

options


Type: object

inputType

Type: string\
Default: 'url'\
Values: 'url' 'html'

Set it to html to treat input as HTML content.

  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('<h1>Awesome!</h1>', 'screenshot.png', {
  5. inputType: 'html'
  6. });
  7. ```

width

Type: number\
Default: 1280

Page width.

height

Type: number\
Default: 800

Page height.

type

Type: string\
Values: 'png' 'jpeg' 'webp'\
Default: 'png'

Image type.

quality

Type: number\
Values: 0...1\
Default: 1

Image quality. Only for {type: 'jpeg'} and {type: 'webp'}.

scaleFactor

Type: number\
Default: 2

Scale the webpage n times.

The default is what you would get if you captured a normal screenshot on a computer with a retina (High DPI) screen.

emulateDevice

Type: string\
Values: Devices(Use the name property)

Make it look like the screenshot was taken on the specified device.

This overrides the width, height, scaleFactor, and userAgent options.

  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {
  5. emulateDevice: 'iPhone X'
  6. });
  7. ```

fullPage

Type: boolean\
Default: false

Capture the full scrollable page, not just the viewport.

defaultBackground

Type: boolean\
Default: true

Include the default white background.

Disabling this lets you capture screenshots with transparency.

timeout

Type: number (seconds)\
Default: 60

The number of seconds before giving up trying to load the page.

Specify 0 to disable the timeout.

delay

Type: number (seconds)\
Default: 0

The number of seconds to wait after the page finished loading before capturing the screenshot.

This can be useful if you know the page has animations that you like it to finish before capturing the screenshot.

waitForElement

Type: string

Wait for a DOM element matching the given CSS selector to appear in the page and to be visible before capturing the screenshot. It times out afteroptions.timeout seconds.

element

Type: string

Capture the DOM element matching the given CSS selector. It will wait for the element to appear in the page and to be visible. It times out afteroptions.timeout seconds. Any actions performed as part of options.beforeScreenshot occur before this.

hideElements

Type: string[]

Hide DOM elements matching the given CSS selectors.

Can be useful for cleaning up the page.

This sets [visibility: hidden](https://stackoverflow.com/a/133064/64949) on the matched elements.

  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {
  5. hideElements: [
  6.   '#sidebar',
  7.   'img.ad'
  8. ]
  9. });
  10. ```

removeElements

Type: string[]

Remove DOM elements matching the given CSS selectors.

This sets [display: none](https://stackoverflow.com/a/133064/64949) on the matched elements, so it could potentially break the website layout.

clickElement

Type: string

Click the DOM element matching the given CSS selector.

scrollToElement

Type: string | object

Scroll to the DOM element matching the given CSS selector.

element

Type: string

A CSS selector.

offsetFrom

Type: string\
Values: 'top' | 'right' | 'bottom' | 'left'

Offset origin.

offset

Type: number

Offset in pixels.

disableAnimations

Type: boolean\
Default: false

Disable CSS animations and transitions.

blockAds

Type: boolean\
Default: true

Ad blocking.

isJavaScriptEnabled

Type: boolean\
Default: true

Whether JavaScript on the website should be executed.

This does not affect the scripts and modules options.

modules

Type: string[]

Inject JavaScript modules into the page.

Accepts an array of inline code, absolute URLs, and local file paths (must have a .js extension).

  1. ```js
  2. import captureWebsite from 'capture-website';

  4. await captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {
  5. modules: [
  6.   'https://sindresorhus.com/remote-file.js',
  7.   'local-file.js',
  8.   `
  9.   document.body.style.backgroundColor = 'red';
  10.   `
  11. ]
  12. });
  13. ```

scripts

Type: string[]

Same as the `modules` option, but instead injects the code as [`