javascript - 使用 Node.js 捕获延迟加载页面的屏幕截图

Question

我正在寻找一种方法，可以在每次更改时截取长网页的屏幕截图。我想为此使用 Node.js。我的问题是关于如何使用图像呈现整个页面并将其保存到磁盘广告图像文件。

网页上的大多数图片都是延迟加载的。所以我想我需要先向下滚动整个页面，然后再进行屏幕截图。

我尝试了不同的工具:

• casperjs
• Node 网络截图
• phantomjs

所有这些似乎都太复杂了，即使不是不可能，甚至无法安装。我没有成功与他们中的任何一个。

casperjs 似乎是一个非常不错的选择，但我无法让它在 node.js 中工作。它一直在提示，casper.start() 不是一个有效的方法...

我最接近 node-webshot，但我没能向下滚动页面。

到目前为止，这是我的代码:

var webshot = require('webshot');

var options = {
    shotSize: {
        height: 'all',
        streamType: 'jpg'
    }
};

webshot('www.xx.com', 'xx.com.jpg', options, function(err) {
    // screen shot saved to 'xx.com.jpg'
});

顺便说一句，我正在 Mac 上开发。完成的 Node 应用程序将在 Linux 服务器上。

如有任何意见或经验，我们将不胜感激!

Answer 1

不能真正帮助安装 CasperJS，因为在 Windows 上它只需使用 npm install casperjs -g 即可工作。

我已经放了一个简单的脚本来做屏幕截图:

var casper = require('casper').create();
casper.options.viewportSize = {width: 1600, height: 950};
var wait_duration = 5000;
var url = 'http://stackoverflow.com/questions/33803790/capture-screen-shot-of-lazy-loaded-page-with-node-js';
console.log("Starting");
casper.start(url, function() {
    this.echo("Page loaded");
});

casper.then(function() {
    this.scrollToBottom();
    casper.wait(wait_duration, function() {
        casper.capture('screen.jpg');
        this.echo("Screen captured");
    });
});

casper.then(function() {
    this.echo("Exiting");
    this.exit();
});

casper.run();

代码相当简单:

• 加载网址
• 滚动到底部
• 等待特定的时间(wait_duration)加载内容
• 截图
• 结束

希望这对您有用!