gfx-screenshot

Take screenshots of parts of graphics (for downstream apps, newsletters, etc.)

A work in progress. Most of this code has been copied from various projects, including:

• https://github.com/WPMedia/gee-screenshooter
• https://github.com/WPMedia/gfx_2020_world_mapping-spread-new-coronavirus
• https://www.washingtonpost.com/graphics/2020/politics/who-spoke-most-at-democratic-debate-january/

Goals

Oh graphics we often need to take screenshots of various parts of our pages. The main use-cases are for:

• Downstream apps: Our apps do not run JavaScript, so they cannot include d3.js charts, for example.
• Newsletters: We often want to include the latest version of a map or chart in a newsletter.
• Homepage: Sometimes the homepage wants to include an image that will show the most recent data.

How it works right now

Currently this tool is a command-line script that starts a local webserver, opens the given page and take a screenshot of a part of it. We have a dummy gulp task that runs this script.

Installation

npm install gfx-screenshot

Usage

Usage: screenshot [options]

Options:
  -s, --server-directory <string>  Directory to start local web server
  -w, --width <number>             Width
  -f, --file <string>              Filename
  -o, --output-directory <string>  Output directory
  --selector <string>              Selector
  --wait-for-selector <string>     Wait for selector
  --css-overrides-file <string>    CSS file to include while taking screenshot
  -h, --help                       display help for command