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

我正在寻找一种方法，可以在每次更改时对长网页进行屏幕截图。我想为此使用 Node.js。我的问题是关于如何渲染带有图像的完整页面并将其保存到磁盘和图像文件。

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

我尝试了不同的工具：

• casperjs
• 节点网络快照
• 幻影

所有这些似乎都太复杂了，甚至不可能安装。我对其中任何一个都没有成功。

casperjs看起来是一个非常不错的选择，但我无法让它在node.js 中工作。它一直抱怨 casper.start() 不是一个有效的方法......

我最接近节点网络快照，但我没能向下滚动页面。

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

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 服务器上。

任何评论或经验都值得赞赏！

无法真正帮助安装 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) 用于加载内容
• 做一个截图
• End

希望这对你有用！