Question

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

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

我尝试了不同的工具：

的 casperjs
node-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'
});

BTW我正在使用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中运行节点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滚动，点击，所有内容
当你认为这是个好时光时拍照
close session

使用nodejs快速安装selenium - ＆gt; https://github.com/vvo/selenium-standalone

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

3 个答案: