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

Question

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

网页上的大多数图片都是延迟加载的。 所以我想在拍摄屏幕截图之前我需要先向下滚动整个页面。

我尝试了不同的工具：

• casperjs
• 节点webshot
• 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 ）来加载东西
• 做截图
• 结束

希望这对你有用！

Answer 2

这段代码适用于OSX中的节点，将其保存为test.js并在CLI中运行node test.js

var webshot = require('webshot');

var options = {
  streamType: 'png',
  windowSize: {
  width: 1024,
  height: 768
},
  shotSize: {
    width: 'all',
    height: 'all'
  }
};

webshot("blablabla.com","bla-image.png",options,(err) => {
  if(err){
    return console.log(err);
  }
  console.log('image succesfully');
});

Answer 3

你可以通过Selenium自动化它， http：//webdriver.io/ 。 是的，它最像是一个测试引擎，而不是一个屏幕截图应用程序，但您可以完全控制浏览器自动化并在调试时查看显示器上的浏览器

• 启动selenium服务器，例如Google Chrome
• 加载您的页面
• 使用webdriver.io滚动，单击，所有内容
• 当你认为这是一个美好的时光时拍照
• 关闭会议

使用nodejs快速安装selenium的方法 - > https://github.com/vvo/selenium-standalone