CasperJS截图只是页面的一小部分

时间:2015-03-19 22:52:55

标签: javascript casperjs

captureSelector()的CasperJS文档没有说明如何设置屏幕截图的大小。默认情况下(至少在我的系统上使用webkit,Windows 8)似乎是截取页面左上角的一个小屏幕截图。

我找错了地方吗?

我找到了viewportSize。我认为这是我需要的,但是有没有人有代码可以将其设置为合理的默认值(如100%)?

仅供参考this.viewport('100%', '100%');挂起,所以我认为它不会%

我是否必须注入将窗口宽度和高度返回到页面中的代码并将其传回以提取它或者是否有更简单的方法?

1 个答案:

答案 0 :(得分:7)

casper.captureSelector()应该截取您选择的元素的屏幕截图。如果您想截取整个页面的屏幕截图,则需要使用casper.capture()

请注意,PhantomJS的默认viewportSize为400x300。有些页面没有正确调整大小,因此页面的一部分不可见。您需要将其设置为类似桌面的内容:

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

没有办法让它100%。您可以做的是读出页面正文的宽度,并通过casper.viewport()相应地设置视口。

var width = 1280;
casper.start(url, function(){
    width = this.evaluate(function(){
        return document.body.clientWidth;
    });
}).viewport(width, 800).then(function(){
    this.capture("screenshot.png");
}).run();