viewportSize wydaje się nie działać z PhantomJS

Question

Czy wyjście z tego skryptu PhantomJS nie powinno mieć 240x320 pikseli? Dostaję duży obraz o domyślnym rozmiarze. Funkcja clipRect() wydaje się renderować obraz o prawidłowym rozmiarze, ale potrzebuję responsywnej zawartości strony, aby odzwierciedlić rzeczywisty rozmiar okna przeglądarki.

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

Jest to znany problem, ale znalazłem rozwiązania:

1. załadować stronę w iframe z niezależnie od wielkości chcesz.
2. Renderowanie zrzutu ekranu przycięte do prostokąta ramki iframe.

Nie

jest kod to zrobić w tym repozytorium: https://github.com/jbeuckm/Splasher

Answer 2

To wydaje się działać w binarnym dla Mac 1.9.7:

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

Answer 3

To działa !! Okazało się, że fragment od strony github z issue .it zmusza „ciała” element do viewportSize strony:

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

W CasperJS, to przezwyciężenie tego problemu, używane powyżej sposobu (ów), i ostatecznie okazało się, że jest to niepotrzebne (przynajmniej dla mnie, w CasperJS) po ustawieniu pojedynczych opcji rzutni za pomocą metody casper.viewport().

Opublikowałem swoją wersję poniżej, aby zobaczyć, jak może działać z wieloma adresami URL naraz.

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