Easy responsive screenshots with Phantom.js

responsive-screens.js

/*
 * Take a set of full height screenshots for a range of screensizes.
 *   phantomjs responsive-screens.js http://www.cnn.com/ png
 *
 * This will create a directory tree in your current directory which
 * mirrors the URL. All files will be named with the current time.
 * You can run this on a cron to build an archive of screenshots.
 **/

var page = new WebPage(),
    address, output, size, filename_parts, ext, filename, dirs;

var useragent = [
    'Opera/9.80 (X11; Linux x86_64; U; fr) Presto/2.9.168 Version/11.50',
    'Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25',
    'Opera/12.02 (Android 4.1; Linux; Opera Mobi/ADR-1111101157; U; en-US) Presto/2.9.201 Version/12.02'    
];

page.settings = {
  loadImages: true,
  javascriptEnabled: true,
  userAgent: useragent[Math.floor(Math.random() * useragent.length)]
  // resourceTimeout: 5000
};

var fs = require('fs');

var now = new Date();

var viewports = [
    { width: 1920, height: 1080 },
    { width: 1600, height: 900 },
    { width: 1440, height: 900 },
    { width: 1366, height: 768 },
    { width: 1280, height: 800 },
    { width: 1024, height: 768 },
    { width: 768, height: 1024 },
    { width: 736, height: 414 },
    { width: 667, height: 375 },
    { width: 640, height: 360 },
    { width: 568, height: 320 }
];

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: responsive-screens.js URL png|pdf');
    phantom.exit();
} else {
    address = phantom.args[0];
    dir = url_to_dir(address);
    ext = phantom.args[1];
    page.viewportSize = viewports[0];
    output = dir + "/" + date_string() + "-" + viewports[0].width + "." + ext;
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                console.log('Saving '+output+'...');
                page.render(output);
                for (var i=1; i<viewports.length; i++) {
                    page.viewportSize = viewports[i];
                    output = dir + "/" + date_string() + "_" + viewports[i].width + "." + ext;
                    console.log('Saving '+output+'...');
                    page.render(output);
                }
                phantom.exit();
            }, 200);
        }
    });
}

function url_to_dir( url ) {
    var dir;
    dir = url.replace(new RegExp('https?://'), '');
    if (dir.charAt(dir.length-1) == '/') dir = dir.substr(0, dir.length-2);
    fs.makeTree(dir);
    return dir;
}

function date_string() {
    var month = now.getMonth()+1,
        day = now.getDate(),
        minutes = now.getMinutes();

    if ( month < 10 ) month = '0'+month;
    if ( day < 10 ) day = '0'+day;
    if ( minutes < 10 ) minutes = '0'+minutes;

    return [now.getFullYear(), month, day].join('-') + "_" + [now.getHours(), minutes].join('-');
}