使用Node.js捕获延迟加载页面的屏幕截图 [英] Capture screen shot of lazy loaded page with Node.js

问题描述

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

I'm looking for a way to take a screenshot of a long web page every time it changes. I would like to use Node.js for this. My question is about how to render the full page with images and save it to disk ad an image file.

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

Most images on the webpage is lazy loaded. So I guess that I need to scroll down the entire page first, before taking a screen shot.

我尝试了不同的工具：

• casperjs


• node-webshot


• phantomjs

• casperjs
• node-webshot
• phantomjs

所有这些似乎都太复杂，甚至不可能，甚至安装。我没有成功。

All of them seems way too complicated, if not impossible, to even install. I didn't succeed with any of them.

casperjs 似乎是一个非常好的选择，但我无法让它在node.js中运行。它一直在抱怨，casper.start（）不是一个有效的方法...

casperjs seems like a really nice choice, but I can't get it to work within node.js. It keeps complaining, that casper.start() is not a valid method...

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

I got closest with node-webshot, but I did not manage to scroll down page.

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

This is my code so far:

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

BTW I'm developing on a mac. The finished Node app will be on a linux server.

任何评论或经验都表示赞赏！

Any comments or experiences are appreciated!

推荐答案

无法真正帮助安装CasperJS，因为在Windows上只需使用 npm install casperjs -g 。

Can't really help with installing CasperJS since on Windows it works by simply using npm install casperjs -g.

我已经制作了一个简单的脚本来做截图：

I've put up a simple script to do screenshots:

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 ）要加载的东西


• 做截图


• 结束

• Load the url
• Scroll to the bottom
• Wait for a specific duration (wait_duration) for stuff to load
• Do a screenshot
• End

希望这适合你！

这篇关于使用Node.js捕获延迟加载页面的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！