pageres
Capture website screenshots
Last updated 9 months ago by sindresorhus .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install pageres 
SYNC missed versions from official npm registry.

pageres

Build Status Coverage Status XO code style

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.

See pageres-cli for the command-line tool.

Install

$ npm install pageres

Note to Linux users: If you get a "No usable sandbox!" error, you need to enable system sandboxing.

Usage

const Pageres = require('pageres');

(async () => {
	await new Pageres({delay: 2})
		.src('https://github.com/sindresorhus/pageres', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
		.src('https://sindresorhus.com', ['1280x1024', '1920x1080'])
		.src('data:text/html,<h1>Awesome!</h1>', ['1024x768'])
		.dest(__dirname)
		.run();
})();

API

Pageres([options])

options

Type: object

delay

Type: number (Seconds)
Default: 0

Delay capturing the screenshot.

Useful when the site does things after load that you want to capture.

timeout

Type: number (Seconds)
Default: 60

Number of seconds after which the request is aborted.

crop

Type: boolean
Default: false

Crop to the set height.

css

Type: string

Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.

script

Type: string

Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file.

cookies

Type: Array<string | object>

A string with the same format as a browser cookie or an object.

Tip: Go to the website you want a cookie for and copy-paste it from DevTools.

filename

Type: string

Define a customized filename using Lo-Dash templates.
For example <%= date %> - <%= url %>-<%= size %><%= crop %>.

Available variables:

  • url: The URL in slugified form, eg. http://yeoman.io/blog/ becomes yeoman.io!blog
  • size: Specified size, eg. 1024x1000
  • width: Width of the specified size, eg. 1024
  • height: Height of the specified size, eg. 1000
  • crop: Outputs -cropped when the crop option is true
  • date: The current date (YYYY-MM-DD), eg. 2015-05-18
  • time: The current time (HH-mm-ss), eg. 21-15-11
incrementalName

Type: boolean
Default: false

When a file exists, append an incremental number.

selector

Type: string

Capture a specific DOM element matching a CSS selector.

hide

Type: string[]

Hide an array of DOM elements matching CSS selectors.

username

Type: string

Username for authenticating with HTTP auth.

password

Type: string

Password for authenticating with HTTP auth.

scale

Type: number
Default: 1

Scale webpage n times.

format

Type: string
Default: png
Values: png jpg

Image format.

userAgent

Type: string

Custom user agent.

headers

Type: object

Custom HTTP request headers.

transparent

Type: boolean
Default: false

Set background color to transparent instead of white if no background is set.

pageres.src(url, sizes, [options])

Add a page to screenshot.

url

Required
Type: string

URL or local path to the website you want to screenshot. You can also use a data URI.

sizes

Required
Type: string[]

Use a <width>x<height> notation or a keyword.

A keyword is a version of a device from this list. You can also pass in the w3counter keyword to use the ten most popular resolutions from w3counter.

options

Type: object

Options set here will take precedence over the ones set in the constructor.

pageres.dest(directory)

Set the destination directory.

directory

Type: string

pageres.run()

Run pageres. Returns Promise<Buffer[]>.

Task runners

Check out grunt-pageres if you're using Grunt.

For Gulp and Broccoli, just use the API directly. No need for a wrapper plugin.

Built with Pageres

  • Break Shot - Desktop app for capturing screenshots of responsive websites.

Related

Current Tags

  • 5.2.0                                ...           latest (9 months ago)

38 Versions

  • 5.2.0                                ...           9 months ago
  • 5.1.0                                ...           a year ago
  • 5.0.2                                ...           a year ago
  • 5.0.1                                ...           a year ago
  • 5.0.0                                ...           a year ago
  • 4.5.1                                ...           3 years ago
  • 4.5.0                                ...           3 years ago
  • 4.4.0                                ...           3 years ago
  • 4.3.0                                ...           3 years ago
  • 4.2.0                                ...           4 years ago
  • 4.1.2                                ...           4 years ago
  • 4.1.1                                ...           4 years ago
  • 4.1.0                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 3.0.2                                ...           5 years ago
  • 3.0.1                                ...           5 years ago
  • 2.1.0                                ...           5 years ago
  • 2.0.0                                ...           5 years ago
  • 1.4.0                                ...           5 years ago
  • 1.3.0                                ...           5 years ago
  • 1.2.2                                ...           5 years ago
  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
  • 0.4.1                                ...           6 years ago
  • 0.4.0                                ...           6 years ago
  • 0.3.0                                ...           6 years ago
  • 0.2.3                                ...           6 years ago
  • 0.2.2                                ...           6 years ago
  • 0.2.1                                ...           6 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.4                                ...           6 years ago
  • 0.1.3                                ...           6 years ago
  • 0.1.2                                ...           6 years ago
  • 0.1.1                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Downloads
Today 0
This Week 12
This Month 12
Last Day 5
Last Week 16
Last Month 307
Dependencies (14)
Dev Dependencies (28)

Copyright 2014 - 2017 © taobao.org |