📷 page2image

page2image is an npm package using Headless Chrome for taking screenshots which also provides CLI command

Using By Module 📦

Install

npm i page2image --save

Quick Examples

import Screenshot from 'page2image';

const screenshot = new Screenshot({
  waitUntil: 'networkidle2',
  viewportConfig: { width: 1920, height: 1080 },
  screenshotConfig: { fullPage: true, path: 'screenshot.png' },
});

screenshot
  .takeScreenshot('https://github.com/Runjuu')
  .then(process.exit);

Methods

takeScreenshot(url:string)

Accept a url string as an argument and return an image Buffer

init(Config)

Accept a Config object and next time calling takeScreenshot will using new config to take screenshot

Config: {}

• waitUntil
• evaluate
• viewportConfig
• screenshotConfig
• disableJS <boolean>
  • whether or not to disable JavaScript on the page. Defaults to false
• emulateConfig
• selector
  • if selector is valid, page2image will take screenshot for selected element

Using By CLI ⌨️

Install

npm i page2image --global

Quick Examples

# Single page
> page2image https://github.com/Runjuu --type=jpeg --quality=80

# Multi-page
> page2image https://github.com/Runjuu https://github.com/Runjuu --type=jpeg --quality=80

# Local file
> page2image ./index.html --type=jpeg --quality=80

Args <argv>: <default value>

width: 1366

Page width in pixels.

height: 768

Page height in pixels, default will take a full page screenshot.

type: png

Specify screenshot type, could be either 'jpeg' or 'png'.

quality: 100

The quality of the image, between 0-100. Not applicable to png images.

dpr: 2

Specify device scale factor.

selector: null

take a screenshot for the selected element

page2image https://github.com/Runjuu --selector=".js-contribution-graph"

disableJS: false

To disable JavaScript on the page.

waitUntil: networkidle2

When to consider navigation succeeded. more details

sleep: 0

if sleep is a number

Wait ${sleep} milliseconds to take screenshot.

if sleep is a selector

Wait for the selector to appear in page

emulate: false

List of all available devices is available in the source code. Below is an example of using emulate args to emulate iPhone 6

page2image https://github.com/Runjuu --emulate=iPhone6 

scrollToBottom: false

Wait till viewport scroll to the bottom of the page

named: <default using url to named>

Name of screenshot

path: <default using current path>

Path to save the screenshot

page2image https://github.com/Runjuu --path=../
page2image https://github.com/Runjuu --path=/User/someone/
page2image https://github.com/Runjuu --path=~/Downloads

To Do

• [x] take screenshots via url
• [x] take screenshots from local html file
• [ ] take multiple screenshots from file

🤔 have any questions? 👉 new issues 😉