CasperJS截图只是页面的一小部分 [英] CasperJS screenshot is only a small part of page

问题描述

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

The CasperJS documentation for captureSelector() does not say anything about how to set the size of the screenshot. The default (at least on my system using webkit, Windows 8) seems to be to take a tiny screenshot of the top left portion of the page.

我在寻找错误的地方？

我发现 viewportSize 。我认为这是我需要的，但有没有人有代码可以将其设置为合理的默认值（如100％）？

I found viewportSize. I assume this is what I need, but does anyone have code that can set this to a sensible default (like 100%)?

FYI this .viewport（'100％'，'100％'）; 只是挂起，所以我认为它不需要％。

FYI this.viewport('100%', '100%'); just hangs, so I assume it doesn't take %.

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

Do I have to inject code that will return the window width and height into the page and pass that back to extract it or is there an easier way?

推荐答案

casper.captureSelector（）应该截取您选择的元素。如果你想截取整个页面的截图，你需要使用 casper.capture（）。

casper.captureSelector() should take the screenshot of the element that you select. If you want to take a screenshot of the whole page you need to use casper.capture().

注意PhantomJS的默认viewportSize为400x300。某些页面未正确调整大小，因此页面的一部分不可见。您需要将其设置为类似于桌面的东西：

Note that PhantomJS has a default viewportSize of 400x300. Some pages don't resize correctly, so a part of the page is not visible. You will need to set this to something desktop-like:

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

没有办法让它100％。您可以做的是读出页面正文的宽度，并通过 casper.viewport（） 。

There is no way to make it 100%. What you could do is read out the width of the body of the page and set the viewport accordingly through 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();

这篇关于CasperJS截图只是页面的一小部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！