Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Pageres | 9,487 | 241 | 56 | 7 months ago | 50 | August 30, 2022 | 19 | mit | TypeScript | |
Capture website screenshots | ||||||||||
Browsershot | 4,299 | 98 | 27 | 4 days ago | 123 | August 19, 2022 | 6 | mit | PHP | |
Convert HTML to an image, PDF or string | ||||||||||
Wayback | 1,297 | 4 days ago | 78 | March 20, 2022 | 62 | gpl-3.0 | Go | |||
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 Screenshot | 449 | a month ago | 66 | isc | JavaScript | |||||
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! | ||||||||||
Witnessme | 445 | 2 years ago | 2 | July 26, 2020 | 11 | gpl-3.0 | Python | |||
Web Inventory tool, takes screenshots of webpages using Pyppeteer (headless Chrome/Chromium) and provides some extra bells & whistles to make life easier. | ||||||||||
Screenshot Stream | 226 | 80 | 11 | 4 years ago | 31 | June 11, 2017 | 9 | mit | JavaScript | |
Capture screenshot of a website and return it as a stream | ||||||||||
Pywebshot | 182 | 2 years ago | 3 | Python | ||||||
Command line webpage screenshot and thubnail generator | ||||||||||
Screencap | 173 | 34 | 2 | 4 years ago | 6 | July 19, 2015 | 21 | mit | JavaScript | |
A gem to screencap webpages in ruby. Uses Phantom.js under the hood. | ||||||||||
Nodejs Serverless Microservices Demo | 72 | 5 years ago | 1 | apache-2.0 | JavaScript | |||||
A set of Node.js microservices to track visual changes of web pages. | ||||||||||
Phpheadlesschrome | 67 | 1 | a year ago | 9 | March 29, 2022 | mit | PHP | |||
A PHP wrapper for using Google Chrome Headless mode. Convert URL or HTML to a PDF / screenshot. Easy to use and OOP interfaced. |
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.
npm install pageres
Note to Linux users: If you get a "No usable sandbox!" error, you need to enable system sandboxing.
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!');
Type: object
Type: number
(Seconds)
Default: 0
Delay capturing the screenshot.
Useful when the site does things after load that you want to capture.
Type: number
(Seconds)
Default: 60
Number of seconds after which the request is aborted.
Type: boolean
Default: false
Crop to the set height.
Type: string
Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.
Type: string
Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file.
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.
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 truedate
: The current date (YYYY-MM-DD), eg. 2015-05-18time
: The current time (HH-mm-ss), eg. 21-15-11Type: boolean
Default: false
When a file exists, append an incremental number.
Type: string
Capture a specific DOM element matching a CSS selector.
Type: string[]
Hide an array of DOM elements matching CSS selectors.
Type: string
Username for authenticating with HTTP auth.
Type: string
Password for authenticating with HTTP auth.
Type: number
Default: 1
Scale webpage n
times.
Type: string
Default: png
Values: 'png' | 'jpg'
Image format.
Type: string
Custom user agent.
Type: object
Custom HTTP request headers.
Type: boolean
Default: false
Set background color to transparent
instead of white
if no background is set.
Type: boolean
Default: false
Emulate preference of dark color scheme.
Type: object
Default: {}
Options passed to puppeteer.launch()
.
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!');
Add a page to screenshot.
Required
Type: string
URL or local path to the website you want to screenshot. You can also use a data URI.
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.
Type: object
Options set here will take precedence over the ones set in the constructor.
Set the destination directory.
Type: string
Run pageres. Returns Promise<Buffer[]>
.
Check out grunt-pageres if you're using Grunt.
For Gulp and Broccoli, just use the API directly. No need for a wrapper plugin.