juliangruber/capture-screenshot

Capture screenshots in multiple browsers!

capture-screenshot

Capture screenshots in multiple browsers. One module, to rule them all!

Browsers

• Chrome Headless
• Electron
• PhantomJS
• Firefox Headless

Usage

Capture 1024x768 screenshots of https://twitter.com/ in Chrome, Electron and PhantomJS:

const capture = require('capture-screenshot')
const fs = require('fs')

capture({ url: 'https://twitter.com/' })
  .then(imgs => {
    fs.writeFileSync('chrome.png', imgs.chrome)
    fs.writeFileSync('electron.png', imgs.electron)
    fs.writeFileSync('phantomjs.png', imgs.phantomjs)
  })

Chrome	Electron	PhantomJS

API

capture({ url, browsers = ['chrome', 'electron', 'phantomjs'], width = 1024, height = 768 })

Capture a screenshot of url, returns a Promise which resolves with an Object of Buffers.

Options:

• url Page url
• browsers The browsers to test
• width Viewport width
• height Viewport height

Installation

$ npm install capture-screenshot

CI

If you use the electron browser, this project requires an xvfb setup to be running in your CI environment. For an example how to set one up, check out the .travis.yml. After that, no further setup is required however, as all the executables are installed automatically.

Related projects

• capture-chrome — Capture screenshots using Chrome
• capture-electron — Capture screenshots using Electron
• capture-phantomjs — Capture screenshots using PhantomJS

Sponsors

This module is proudly supported by my Sponsors!

Do you want to support modules like this to improve their quality, stability and weigh in on new features? Then please consider donating to my Patreon. Not sure how much of my modules you're using? Try feross/thanks!

License

MIT

Copyright (c) 2017 Julian Gruber <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

capture-screenshot's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

SVG not support

When i screenshot the url that contain with avg files, the avg not showing the right way , some are missing and some are not full image load. thanks

Running on ubuntu server, will I need to install an x server?

I'm creating a discord bot. One of its features is the ability to grab a screnshot from http://jef.works/picture-quote-generator and paste that in your current channel. The bot is running on an ubuntu server, but appears to be genorating white squares with question marks like this
note: this IS in my bot startup script, I copied and pasted it from a phantomjs thread due to another error it was throwing: QT_QPA_PLATFORM=offscreen

Code genorating these white squares:

screenshot('http://jef.works/picture-quote-generator/')
 .width(800)
 .height(600)
 .capture(function(err, img) {
   if (err) throw err;
   file = Math.round((new Date()).getTime() / 1000);
   fs.writeFileSync('/var/www/html/host/gcore/quotes/'+file+'.png', img);

How to make screenshot.capture() synchronous ?

I have list of urls and want to process them line by line, but by default url-to-screenshot process them asynchronously which highly resource consumed when all url being captured together at the same time (even hang my pc in my case).

is the any way to call capture() synchronously ?

when cant find website

Hello,
When a website can't be found
example screenshot("http://www.dfdsafdsfdscascdasc12xc.com")
The program just hangs.
Is there a property or method that can be set to exit or throw error after certain time has passed trying to get the website.
The current timeout(3000) is only for waiting for site to load then get snapshot.
Thanks

Allow to use phantomjs from npm

It looks a bit more convenient use npm version of phantomjs.
Need just instead exec('phantomjs use

var phantomjs = require('phantomjs')
var binPath = phantomjs.path

exec(binPath

Or something like this (i did not check).

Thanks

Feature (Pixel Ratio)

Please allow for control of pixel ratio for higher quality of screenshots without changing breakpoints. For example a screen shot of 400x600 * 2pr would yield a 800*1200 image but still have mobile breakpoint activated.

add semistandard

The filename, directory name, or volume label syntax is incorrect

Followed the example.

1. Installed: npm install capture-screenshot --save
2. Ran the example:

const capture = require('capture-screenshot');
const fs = require('fs');

capture({url: 'https://twitter.com/'})
  .then(imgs => {
    fs.writeFileSync('chrome.png', imgs.chrome);
    fs.writeFileSync('electron.png', imgs.electron);
    fs.writeFileSync('phantomjs.png', imgs.phantomjs);
  });

But got error:

(node:9444) UnhandledPromiseRejectionWarning: Error: Command failed: 'C:\Users\PragmaticEd\workspace\_private\TestApp\node_modules\electron\dist\electron.exe' 'C:\Users\PragmaticEd\workspace\_private\TestApp\node_modules\capture-electron/script/render.js' 'https://twitter.com/' 1024 768 0 png
The filename, directory name, or volume label syntax is incorrect.

  at ChildProcess.exithandler (child_process.js:289:12)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:962:16)
at Socket.stream.socket.on (internal/child_process.js:381:11)
at Socket.emit (events.js:182:13)
at Pipe._handle.close (net.js:606:12)
(node:9444) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9444) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I noticed that this package installed capture-electron but this error says it tries to access node_modules\electron. Could that be the reason?

Just for giggles, i installed electron and i got slitly different error:

(node:33936) UnhandledPromiseRejectionWarning: Error: Command failed: 'C:\Users\PragmaticEd\workspace\_private\TestApp\node_modules\capture-electron\node_modules\electron\dist\electron.exe' 'C:\Users\PragmaticEd\workspace\_private\TestApp\node_modules\capture-electron/script/render.js' 'https://twitter.com/' 1024 768 0 png
The filename, directory name, or volume label syntax is incorrect.

    at ChildProcess.exithandler (child_process.js:289:12)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:962:16)
    at Socket.stream.socket.on (internal/child_process.js:381:11)
    at Socket.emit (events.js:182:13)
    at Pipe._handle.close (net.js:606:12)
(node:33936) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:33936) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Note how, before i installed electron, it was checking for node_modules\electron\dist\electron.exe, but after i installed electron, it started checking: node_modules\capture-electron\node_modules\electron\dist\electron.exe

Platform: WIndows 10

phantomjs params

Hello,

i am using this module, how to use it using an additional phantomjs params?

I had a problem when try to download https site's screenshot.
I resolve it using this command: phantomjs --ssl-protocol=any ......
( http://stackoverflow.com/questions/12021578/phantomjs-failing-to-open-https-site )

any plans for adding a delay for JS powered websites?

Great tool thanks for sharing! The only one that actually works for me. Anyway I tried to play a little with the source code but without much success so I asking here - There is any plans for adding some kind of delay support to make it work with JS powered websites? I tried to add here something like sleep 3s to be executed after it loading the page but it was absolutely wrong lol

Getting error ssl

"phantomjs --ignore-ssl-errors=true --ssl-protocol=sslv3

How to fix that error.

Hi great people, the example you gave is not working.

I created a file, 'screenshot.js' which has the code given in the docs.
From the command line when i run node screenshot.js, the command prompt hangs.
Can u please help me?