如何在CasperJS中设置视口高度auto

Question

我想捕捉多个网页的截图，每个网页都有不同的高度。如何根据页面高度动态设置高度？

这样的事情： casper.viewport(1200, 'auto');

Answer 1

默认情况下，PhantomjS浏览器（由CasperJS使用）会自动呈现页面的完整高度。在CasperJS中，相应的方法是

casper.capture()

要设置页面的水平宽度，请设置视口大小：

var casper = require('casper').create({
    viewportSize: {width: 1280, height: 800}
});

此设置仅会影响屏幕截图的宽度，高度将与展示整个页面所需的一样大。

示例：

var casper = require('casper').create({   
    verbose: true, 
    logLevel: 'debug',
    pageSettings: {
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
    }
});
casper.options.viewportSize = {width: 1280, height: 1024};

casper.start("http://stackoverflow.com/questions/tagged/phantomjs");
casper.then(function() {
    casper.capture("stackoverflow.png");
});

casper.run();

The resulting image (439 kb)高3448像素，超过选项中设置的1024像素。