viewportSize似乎不適用於PhantomJS

不應該從這個PhantomJS腳本的輸出是240x320像素？我得到一個大的默認大小的圖像。 clipRect（）似乎會呈現正確的大小圖像，但我需要頁面的響應內容來反映實際的瀏覽器窗口大小。viewportSize似乎不適用於PhantomJS

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); 
    } 

});

來源

2012-11-15 Joe Beuckman

問題的討論是在這裏http://code.google.com/p/phantomjs/issues/detail?id=619 –

這是一個已知的問題，但我發現了一個解決辦法：

加載頁面成任何你喜歡的大小的iframe。
呈現剪貼到iframe矩形的截圖。

有代碼來執行它在這個倉庫：https://github.com/jbeuckm/Splasher

來源

2013-05-25 04:24:53

-1

這似乎在Mac二進制工作爲1.9.7：

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

來源

2014-08-17 21:55:56

@ArtjomB。我添加了Mac二進制1.9.7版本。 –

好的，在phantomjs（1.9.7）的windows版本中會產生一個錯誤。 –

這個作品！實測值的issue。它的GitHub的網頁上即可迫使「身體」元件到頁面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(); 
});

來源

2014-10-01 14:45:01

小於400x320的viewportSize怎麼樣？它仍然有效嗎？ –

是的，它確實..它會給你所定義的任何視口大小的圖像..雖然它不會調整網頁，而是產生裁剪圖像 –

在這裏很晚:-)剛開始使用PhantomJS來回節點，並有設置視口大小不起作用。此解決方法節省了一天的時間。 TX！ – James

-1

在CasperJS，我處理這個問題，使用了上述方法（一個或多個），並且最終發現當我通過casper.viewport()方法設置單個視口選項時，它是不必要的（至少對我來說，在CasperJS中）。

我已經在下面發佈了我的版本，所以你可以看到它是如何與許多網址一起工作的。

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

來源

2014-10-05 23:56:27

viewportSize似乎不適用於PhantomJS

回答

相關問題