A webpage capture NPM package built over puppeteer, use headless chrome to take screenshot of page in any possible viewport for UI designers and developers in RWD
Capture screenshot by calling function capture which requires 3 parameters width, height, URL respectively.
-
To download and save in package.json file
npm install --save easy-screen-capture
-
To download without saving
npm install easy-screen-capture
var easyScreenCapture = require("easy-screen-capture")
This method captures the screenshot of the page in your required viewport
easyScreenCapture.capture(viewports, urls, directory)
parameters:
-
viewports: It is an array of objects. each object containing height and width property to specify the height and width of the viewport
-
urls: It is an array of url's for whose you want to capture screenshots.
-
directory:(optional) This is an optional parameter specify the path to save your screenshots. By default it is "assets-easy-screen-capture" located in the same directory in which the calling script exists.
var viewports = [{
height: 736,
width: 414
}, {
height: 1080,
width: 1920
}]
let url = "https://www.google.com";
easyScreenCapture.capture(viewports, urls)
var viewports = [{
height: 736,
width: 414
}, {
height: 1080,
width: 1920
}]
let url = "https://www.google.com";
let directory = "/path/to/desired/directory";
easyScreenCapture.capture(viewports, url, directory)
you can also pass multiple urls using the array of urls as we have done in the previous code example
var viewports = [{
height: 736,
width: 414
}, {
height: 1080,
width: 1920
}]
var urls = [{
url: "https://www.google.com"
},
{
url: "https://github.com/JDchauhan/easy-screen-capture"
},
{
name: "npm",
url: "https://www.npmjs.com/~jdchauhan"
}
]
easyScreenCapture.capture(viewports, urls, directory);
you can also save the file to a custom directory. for this you need to set the directory using
easyScreenCapture.setDir("/path/to/desired/directory");
before call to capture();
It is used to set maximum time in milliseconds to wait for the browser instance to start.
-
Defaults to 30000 (30 seconds).
-
Pass 0 to disable timeout.
easyScreenCapture.setTimeOut(0);
Using above code would create a folder in directory "assets-easy-screen-capture" located in the same directory in which the calling script exists.
All your captured PNG files are saved in this directory.
On successfull execution of code you will get a message saying it has been successfully captured.
In case of error you get errors in console as well as.
The capture() method has been deprecated in this method. This method accepts only the url, height and width in previous versions but in this version it accepts an array of object for multiple viewports and an array of urls
- Puppeteer
- File-system
Please submit bug reports to https://github.com/JDchauhan/easy-screen-capture.
Pull requests are welcome.