viewportSize sembra non funzionare con PhantomJS

Question

Non dovrebbe l'output di questo script PhantomJS essere 240x320 pixel? Ricevo un'immagine grande e di dimensioni predefinite. clipRect() sembrerebbe rendere l'immagine della dimensione corretta, ma ho bisogno del contenuto reattivo della pagina per riflettere la dimensione effettiva della finestra del browser.

var page = require('webpage').create(); 

page.viewportSize = { width: 240, height: 320 }; 

page.open('http://cnn.com', function (status) { 

    if (status !== 'success') { 
     console.log('Unable to load the address!'); 
    } else { 
     window.setTimeout(function() { 
      page.render('default.png'); 
      phantom.exit(); 
     }, 200); 
    } 

}); 

Answer 1

Questo è un problema noto, ma ho trovato una soluzione:

1. Caricare la pagina in un iframe di qualsiasi dimensione che ti piace.
2. Rende uno screenshot ritagliato nel rettangolo dell'iframe.

Ci

è il codice di farlo in questo repository: https://github.com/jbeuckm/Splasher

Answer 2

Questo sembra funzionare nel binario Mac 1.9.7:

page.set('viewportSize', {width: 320, height: 480}); 

Answer 3

questo funziona !! Trovato il frammento sulla pagina github del issue spiccatamente costringe l'elemento 'corpo' alla pagina ViewportSize:

var width = 1024; 
var height = 768; 
var webpage = require('webpage'); 

page = webpage.create(); 
page.viewportSize = {width: width, height: height}; 
page.open('http://harness.io', function(status) { 
    console.log(status); 
    page.evaluate(function(w, h) { 
     document.body.style.width = w + "px"; 
     document.body.style.height = h + "px"; 
    }, width, height); 
    page.clipRect = {top: 0, left: 0, width: width, height: height};                               
    page.render('/tmp/test.png'); 
    phantom.exit(); 
}); 

Answer 4

In CasperJS, ho affrontato questo problema, utilizzare il metodo di cui sopra (s), e alla fine ho scoperto che non era necessario (almeno per me, in CasperJS) dopo aver impostato le opzioni di visualizzazione singola tramite il metodo casper.viewport().

Ho pubblicato la mia versione di seguito, in modo da poter vedere come potrebbe funzionare con molti URL contemporaneamente.

// 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();