multishot

Creates screenshots for pages

multishot

A lib for generating multiple screenshots

Currently only works on osx.

brew install webkit2png
npm install multishot --save-dev
npm install multishot -g
Usage: multishot [opts]
 
Options:
  -o     Output directory                                        [default: process.cwd()]
  -t     Temp directory. Note: This directory will be truncated. [default: "/tmp/multishot/"]
  -u     List of urls to use.
  -f     File containing list of urls (One url per line).
  -p     Prefix for output file.
  -d     Device Profile. Pass with no option to see available presets.
  -w     Sets viewport width.
  -h     Sets viewport height.
  -a     Sets user agent.
  --tpl  Template file.
multishot -f example/urls.txt -o ~/Desktop
multishot -u http://google.com -o ~/Desktop

The text file must contain one url per line. Blank lines are permitted for formatting. You may optionally group urls by putting a group name on its own line. Note: group names cannot contain http.

See example/urls.txt for an example

var Screenshot = require('multishot').Screenshot;
 
var urls = [
    {
      group: 'Circles',
      url: 'http://leanin.org/circles/'
    },
    {
      group: 'Circles',
      url: 'http://leanin.org/circle-login/'
    },
    {
      group: 'Circles',
      url: 'http://leanin.org/circle-faqs/'
    },
    'http://leanin.org',
    {
      url: 'http://leanin.org/team/'
    },
    {
      group: 'News+Inspiration',
      url: 'http://leanin.org/news-inspiration/'
    },
  ];
 
var options = {
  temp: '/tmp/multishot/',
  output: '/tmp/multishot/',
  style: {
    bodyBackground: 'pink',
    custom: '.url { text-decoration: underline; }'
  }
};
 
var shot = new Screenshot(urls, options);
 
shot.on('start', function(){
  console.log('starting');
});
 
shot.on('progress', function() {
  // Update progress bar if you have one 
});
 
shot.on('complete', function(file) {
  // do something on complete 
});
 
shot.on('err', function(err) {
  // Something bad happened 
});
 
shot.start();

start Triggered when start() is called and passes the webkit2png check.

progress
Triggered every time an image is rendered and once on complete.

complete
Triggered once the file image has been generated. Returns the path to composed image.

err
Returns an exception or string.

output
A path to render the final composed image. Will be created if it doesn't exist.

temp
Temp path where screenshots will be taken. Will be created and truncated each run so be careful when setting. Default: /tmp/multishot/

template
A handlebars HTML file to use as the combined template. See custom template section for more information.

prefix Prefix will be added to the output file. Example: dev-20131015.png

Multishot uses a handlebars template to generate the combined image. While the default template is nice, you may want to customize it:

Example:

var shot = new Screenshot(urls, {
  template: '/Users/WalterWhite/templates/multishot.html'
});

The bare minimum your template should have is:

<!DOCTYPE html>
<html>
<head>
  <base href="{{base}}">
</head> 
<body>
  {{#each grouped}}
  <div class="group">
    <h2>{{@key}}</h2>
    {{#each this}}
    <div class="screenshot-container">
      <div class="url">{{this.url}}</div>
      <img src="{{this.group}}/{{this.index}}-full.png" class="screenshot">
    </div>
    {{/each}}
   </div>
  {{/each}}
</body>
</html>

Templates are passed the following variables:

base
Base path to load images

grouped
Object containing all grouped images. See example HTML above for usage.

styles
Various different values that a template can use to customize the css. See Styles section for available values.

These are the default styles:

VariableValue
background#fff
bodyFontFamily"Lato", sans-serif
bodyFontWeight400
bodyFontColor#7f8c8d
bodyFontSize12px
bodyLineHeight17px
groupMargin40px 0
screenshotImgBorder4px solid #d35400
h2FontSize24px
h2FontColor#2C3E50
h2FontWeight700
h2Margin2px 0
urlFontStyleitalic

You can override or add new variables by passing them as properties to the styles option value.

If you want to pass in a full block of css:

var options = {
  styles: {
    custom: '.someSelector{ background: white }'
  }
};

The custom property can contain any css as long as its valid. If you need any more control you should look into writing a unique template to match your needs.