Imagely renders any browserable content as an image, including:
- Local HTML or SVG files
- Remote URLs
- D3 visualizations
- jQuery/Angular/React/Ember-powered UIs
If it can be viewed in a WebKit browser, Imagely can render it.
npm install imagely
To enable command-line usage, install with --link
:
npm install imagely --link
var imagely = require('imagely');
imagely(source, destination, [options], [callback]);
Parameters:
source
(String) URL or local filepath to render. Required.destination
(String) Filepath of the image file to generate. Supported file types: PNG, GIF, JPEG, PDF. Required.options
(Object) See options below.options.width
(Number) Viewport pixel width.options.height
(Number) Viewport pixel height.options.scale
(Number) Zoom level at which to render, necessary for generating HiDPI/Retina images (e.g. scale = 2). Defaults to 1.options.bg
(String) Background color. Defaults to transparent.options.json
(String) Filepath of a JSON file to preload. File contents will be accessible viawindow.data
and available for any scripts in the source file to use.options.batch
(Flag) If you want to loop overoptions.data
to create multiple images. This assumes that all created images are identical except for thewindow.data
you inject on the page.callback
(Function) Function that will be called after the image has been successfully generated.
imagely source destination [--width=<number>] [--height=<number>] [--scale=<number>] [--bg=<color>] [--json=<path>] [--log]
Parameters:
source
(String) URL or local filepath to render. Required.destination
(String) Filepath of the image file to generate. Supported file types: PNG, GIF, JPEG, PDF. Required.-w
,--width
(Number) Viewport pixel width.-h
,--height
(Number) Viewport pixel height.-s
,--scale
(Number) Zoom level at which to render, necessary for generating HiDPI/Retina images (e.g. scale = 2). Defaults to 1.-b
,--bg
(String) Background color. Defaults to transparent.-d
,--json
(String) Filepath of a JSON file to preload. File contents will be accessible viawindow.data
and available for any scripts in the source file to use.-l
,--log
(Flag) If specified, the dimensions of the final image will be logged to the console aswidth height
.--batch
(Flag) If specified, imagely will loop through the--json
file as an array. Each iteration will be injected into the page aswindow.data
.
As shown below, Imagely can be used interchangeably within Node or the command line. See the examples directory for the full example files.
// Node
var imagely = require('imagely');
imagely(
'examples/d3/chart.html',
'examples/d3/chart.gif',
{
json: 'examples/d3/data.json',
bg: 'white'
}
);
# Command line
imagely examples/d3/chart.html examples/d3/chart.gif --json=examples/d3/data.json --bg=white
// Node
var imagely = require('imagely');
imagely(
'examples/d3-batch/chart.html',
'examples/d3-batch/chart.gif',
{
json: 'examples/d3-batch/data.json',
bg: 'purple',
batch: true
}
);
# Command line
imagely examples/d3-batch/chart.html examples/d3-batch/chart.gif --json=examples/d3-batch/data.json --bg=purple --batch
// Node
var imagely = require('imagely');
imagely(
'http://google.com',
'examples/google.jpg',
{ width: 800, height: 600 }
);
# Command line
imagely http://google.com examples/google.jpg -w 800 -h 600
// Node
var imagely = require('imagely');
imagely(
'http://ariya.github.io/svg/tiger.svg',
'examples/tiger.png',
{ scale: 2 },
function(dimensions) {
console.log(dimensions.width, dimensions.height);
}
);
# Command line
imagely http://ariya.github.io/svg/tiger.svg examples/tiger.png --scale=2 --log
# Logs: 1004 1051
Imagely is a light wrapper around puppeteer that facilitates batch processing.