Pageres

Capture website screenshots
Alternatives To Pageres
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Pageres9,487241567 months ago50August 30, 202219mitTypeScript
Capture website screenshots
Browsershot4,29998274 days ago123August 19, 20226mitPHP
Convert HTML to an image, PDF or string
Wayback1,297
4 days ago78March 20, 202262gpl-3.0Go
An archiving tool with an IM-style interface that prioritizes privacy and accessibility, integrated with various archival services including Internet Archive, archive.today, IPFS, Telegraph, and file systems.
1click Webpage Screenshot449
a month ago66iscJavaScript
Entire page Screenshot extension for Google Chrome. I'm developing open source extension for Google Chrome. All extension are free for use. Let's make Chrome great again!
Witnessme445
2 years ago2July 26, 202011gpl-3.0Python
Web Inventory tool, takes screenshots of webpages using Pyppeteer (headless Chrome/Chromium) and provides some extra bells & whistles to make life easier.
Screenshot Stream22680114 years ago31June 11, 20179mitJavaScript
Capture screenshot of a website and return it as a stream
Pywebshot182
2 years ago3Python
Command line webpage screenshot and thubnail generator
Screencap1733424 years ago6July 19, 201521mitJavaScript
A gem to screencap webpages in ruby. Uses Phantom.js under the hood.
Nodejs Serverless Microservices Demo72
5 years ago1apache-2.0JavaScript
A set of Node.js microservices to track visual changes of web pages.
Phpheadlesschrome67
1a year ago9March 29, 2022mitPHP
A PHP wrapper for using Google Chrome Headless mode. Convert URL or HTML to a PDF / screenshot. Easy to use and OOP interfaced.
Alternatives To Pageres
Select To Compare


Alternative Project Comparisons
Readme

pageres

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

import Pageres from 'pageres';

await new Pageres({delay: 2})
	.source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768'], {crop: true})
	.source('https://sindresorhus.com', ['1280x1024', '1920x1080'])
	.source('data:text/html,<h1>Awesome!</h1>', ['1024x768'])
	.destination('screenshots')
	.run();

console.log('Finished generating screenshots!');

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
Default: '<%= url %>-<%= size %><%= crop %>'

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.

darkMode

Type: boolean
Default: false

Emulate preference of dark color scheme.

launchOptions

Type: object
Default: {}

Options passed to puppeteer.launch().

beforeScreenshot

Type: Function

The specified function is called right before the screenshot is captured, as well as before any bounding rectangle is calculated as part of options.element. It receives the Puppeteer Page instance as the first argument and the browser instance as the second argument. This gives you a lot of power to do custom stuff. The function can be async.

Note: Make sure to not call page.close() or browser.close().

import Pageres from 'pageres';

await new Pageres({
	delay: 2,
	beforeScreenshot: async (page, browser) => {
		await checkSomething();
		await page.click('#activate-button');
		await page.waitForSelector('.finished');
	}
})
	.source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
	.destination('screenshots')
	.run();

console.log('Finished generating screenshots!');

pageres.source(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.destination(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

Popular Screenshot Projects
Popular Webpage Projects
Popular Media Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Typescript
Css
Types
Screenshot
Webpage
Crop