A NodeJS script using PhantomJs to render some various screen resolution

snapshot-responsive-models.js

/*
 * A NodeJS script using PhantomJs to render some various screen resolution for a 
 * web page
 * 
 * Developped with PhantomJs 1.7.0
 * 
 * Script require two arguments :
 * 
 * * The URL to snapshot;
 * * The name of the snapshot, it will be suffixed with the used resolution and used as 
 *   the output filename (always in PNG format);
 * 
 * Caveats :
 * 
 * * If the webpage does not fit in the given resolution, phantomjs take the minimal 
 *   resolution where the page fit correctly, by example the google page when asked 
 *   in 320x480 will result in a 615x480 (because the menu need a width at less 615px). 
 *   We could detect this and crop the render (with a second pass?) to output an image 
 *   at the correct asked size;
 * * The script does not manage eventual http errors;
 * * Better trick to manage the transparent background pages;
 * * A way (as a command argument?) to select resolutions (with a simple size list display as an help command?);
 */
var version = "0.1",
    system = require('system'),
    adaptative_models = {
        'mobile_minimal': { width: 320, height: 480 },
        'mobile_middle': { width: 480, height: 320 },
        'tablet_portrait': { width: 600, height: 800 },
        'tablet_landscape': { width: 800, height: 600 },
        'desktop_large': { width: 1440, height: 900 },
    },
    enabled_models = ['mobile_minimal', 'desktop_large'],
    url, destination;

if (system.args.length < 3) {
    
    console.log('Usage: snapshot-responsive-models.js <some URL> <name>');
    phantom.exit(1);
    
} else {
    /*
     * We need to wait that phantomjs has finished to load and snapshoting each page, 
     * and "phantom.exit()" method must conditionned to the end of the process else it 
     * can stop the script before jobs are all done. So we use a simple system with a 
     * callback, where the main function "process" is used as the callback that is 
     * called after phantomjs has finished to snapshot a page.
     */
    
    /* Function to snapshot an "url" with the given "screen size" and output it to a 
     * "name_screensize.png" file
     */
    function snapshot_screen(url, name, destination, screen_size, callback) {
        var page = require('webpage').create(),
            filename = destination+"_"+screen_size.width+"x"+screen_size.height+".png";
            
        page.viewportSize = screen_size;
        
        console.log("------------------------------")
        console.log( "Snapshoting model '"+ name +"' with "+page.viewportSize.width+"x"+page.viewportSize.height );
        console.log( "Filename:"+ filename);
        
        page.open(url, function () {
            // Avoid transparent page when no background image/color are setted on the 
            // body, so then force the white color
            // TODO: This should also use "styles" in conditions, and force the color 
            // with a style
            page.evaluate(function() {
                if (!document.body.bgColor && !document.body.background) {
                    document.body.bgColor = '#ffffff';
                }
                //return document.body.background;
            });
            
            page.render(filename);
            callback.apply();
        });
    }
    
    /* 
     * Main method for doing the jobs
     * 
     * Jobs are taken from the "enabled_models" variable that list the screen size 
     * models to use
     */
    function process() {
        url = system.args[1];
        destination = system.args[2];

        if (enabled_models.length > 0) {
            console.log( "Processing URL : "+ url );

            var model_name = enabled_models[0],
                screen_size = adaptative_models[model_name];
            enabled_models.splice(0, 1);
            // Load page with the screen size, output it then use the process callback
            snapshot_screen(url, model_name, destination, screen_size, process);
        } else {
            // Everything is done so exit the script
            phantom.exit();
        }
    }

    process();
}