如何在 CasperJS 中自动设置视口高度

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://whosebug.com/questions/tagged/phantomjs");
casper.then(function() {
    casper.capture("Whosebug.png");
});

casper.run();

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

如何在 CasperJS 中自动设置视口高度

How to set viewport height auto in CasperJS

phantomjs

casperjs