x
Search Posts:
BLOG POST #128 SHOW ALL

Screenshoot responsive con misure personalizzate, in background con phantomjs

/*
    Installare phantomjs http://phantomjs.org
    
    Salvare questo script come screenshots.js
    
    Da terminale:
    phantomjs screenshots.js http://bquery.com
    
    Script based on an example by Adnane Belmadiaf http://daker.me/2013/07/testing-your-responsive-design-with-phantomjs.html
    requires: phantomjs, async ( npm install async )
*/

var system = require('system'),
    address;

var async = require('async'),
    sizes = [
        [320, 480],
        [360, 480],
        [480, 320],
        [600, 1024],
        [800, 480],
        [1024, 768],
        [1280, 800],
    ];
/* Customize sizes with your favorites */

function capture(sizes, callback) {
    
    address = system.args[1];
    var page = require('webpage').create();
    page.viewportSize = {
        width: sizes[0],
        height: sizes[1]
    };
    page.zoomFactor = 1;
    page.open('http://'+address, function (status) {
        var filename = sizes[0] + 'x' + sizes[1] + '.png';
        page.render('./screenshots/' + filename);
        page.close();
        callback.apply();
    });
}

async.eachSeries(sizes, capture, function (e) {
    if (e) console.log(e);
    console.log('done!');
    phantom.exit();
});