Capture website screenshots
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,
Awesome!
', ['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
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 - -.
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 x 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.
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
capture-website - A different take on screenshotting websites
Repository
sindresorhus/pageres
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
