viewportSize seems not to work with PhantomJS

Question

Shouldn\'t the output from this PhantomJS script be 240x320 pixels? I\'m getting a large, default-sized image. clipRect() would seem to render the correct size image, but I

Answer 1

In CasperJS, I dealt with this issue, used the above method(s), and ultimately found it was unnecessary (at least for me, in CasperJS) once I set the single viewport options via the casper.viewport() method.

I've posted my version below, so you can see how it could work with many urls at once.

// Requires node.js and casperjs (npm install casperjs)
var casper   = require('casper').create();
var root_dir = 'screenshots/';
var links    = [];
var root     = 'http://localhost:8001/';
var DEBUG    = false;
var opts     = {top: 0, left: 0, 'width': 1280, 'height': 1024};

function getHrefs() {
    // Taken wholesale from casperjs
    // http://docs.casperjs.org/en/latest/quickstart.html
    var links = document.querySelectorAll('.days li > a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

function captureLinks(links) {
    casper.echo('= SCREEN CAPTURING LINKS ====');
    casper.each(links, function(self, link) {
        var filename = root_dir + link.replace('/index.html', '') + '.png';
        casper.echo('Capturing... ' + filename);

        // Relevant code...
        this.viewport(opts.width, opts.height);


        self.thenOpen(root + link, function() {
            // slight delay for external libraries and init loading
            this.wait(500, function(){
                this.capture(filename, opts);
            });
        });
    });
}

casper.start(root, function() {
    links = links.concat(this.evaluate(getHrefs));
    this.echo('= GETTING LINKS ====');
    if(DEBUG) this.echo(links.join('\n'));
    captureLinks(links);
});

casper.run();