A simple command line script to grab screenshots of a URL in multiple screen widths (desktop, tablet, mobile, or Twitter Bootstrap breakpoints) using PhantomJS.

README.md

Speelycaptor-lite

What is it

A simple command line script to grab screenshots of a URL in multiple screen widths (desktop, tablet, mobile, or Twitter Bootstrap breakpoints) using PhantomJS. Useful for quickly generating images of websites or in-the-browser design processes to share with team members of a client.

Prerequisites

• OS with bash
• You'll need to install PhantomJS. On OS X, the easiest way to do this is with Brew. $ brew install phantomjs should do it.

Try it

$ curl -s \
  https://gist.githubusercontent.com/adieuadieu/cda66c1391bf11b00219/raw/speely-lite.sh \
  | sh -s http://google.com/ bootstrap

speely-lite.sh

#!/bin/bash

PAHNTOMJS_PATH="`which phantomjs`"
RASTERIZE_SCRIPT_FILE="/tmp/`date +%Y%m%d.%H%M%S`-rasterize.js"
OUTPUT_PATH="`pwd`/rasters"


if [[ -z "$PAHNTOMJS_PATH" ]] ; then
	echo "PhantomJS CLI not found. Try running: 'brew install phantomjs' first."
	exit 1
fi


trap 'rm -f $RASTERIZE_SCRIPT_FILE' EXIT


# This rasterize.js script was taken from the PhantomJS examples.
# See: https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

cat > $RASTERIZE_SCRIPT_FILE <<- EOF
var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        };
    };
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                console.log('Rendered ' + page.viewportSize.width + 'px width ' + address + ' to ' + output);
                phantom.exit();
            }, 2000);
        };
    });
};

EOF





function rasterize {
	DATESTAMP="`date +%Y%m%d.%H%M%S`"
	URL_FOLDER="`echo $1 | sed 's/[\/|:]/-/g'`"
	
	if [ ! -d "$OUTPUT_PATH/$URL_FOLDER" ]; then
		mkdir "$OUTPUT_PATH/$URL_FOLDER"
	fi
	
	phantomjs $RASTERIZE_SCRIPT_FILE $1 "$OUTPUT_PATH/$URL_FOLDER/$DATESTAMP-$2" $3
}



if [[ -n "$1" && -n "$2" ]] ; then
	if [ ! -d "$OUTPUT_PATH" ]; then
		mkdir $OUTPUT_PATH
	fi

	if [ "$2" == "bootstrap" -o "$2" == "bs" ]; then
		rasterize $1 "col-xs.png" 384px
		rasterize $1 "col-sm.png" 880px
		rasterize $1 "col-md.png" 1096px
		rasterize $1 "col-lg.png" 1326px
	else
		rasterize $1 "desktop-1300px.png" 1300px
		rasterize $1 "tablet-1024px.png" 1024px
		rasterize $1 "tablet-768px.png" 768px
		rasterize $1 "mobile-375px.png" 375px
	fi
else
	echo "Specify: [url] [method]"
	echo "Valid methods:"
	echo "	bs | bootstrap	-	Bootstrap breakpoints"
	echo "	(blank)		-	Default; desktop, ipad landscape, ipad portrait, iphone6 portrait"
fi