0

为了记录我的网页设计过程，我想在每次重新加载页面或保存 html 文档或样式表时在我的本地主机上截取带有页面时间戳的屏幕截图。

我使用 grunt 作为任务运行器和无头浏览器 phantomjs 来捕获页面。使用 grunt-localscreenshots https://www.npmjs.org/package/grunt-localscreenshots很容易手动捕获页面。但它很麻烦，完成任务最多需要 10 秒。屏幕捕获过程应该在后台不断发生，但仅在页面更改或保存时发生。

所以我编写了这个 shellscript，它监视目录中的文件更改并触发 phantomjs 脚本。

while true
do
ATIME=`stat .`

if [[ "$ATIME" != "$LTIME" ]]
then
phantomjs screenshot.js
LTIME=$ATIME 
fi
sleep 0.5
done

这是 phantomjs 脚本

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.open("http://127.0.0.1:8080/screenshot-test/dev", function(status) {
    if (status === "success") {
        window.setTimeout(function() {
            var now = Date.now();
            page.render('screenshots/' + now + '.png');
            phantom.exit();
        }, 1000);
    } else {
        console.log("nono");
        phantom.exit();
    }
});

这有点工作，但非常不稳定，只有在 html 更改时才会触发。如果实际上没有任何变化，它也需要 2 或 3 个重复的屏幕截图，有时它根本不需要屏幕截图。可能的原因是页面的渲染时间太长了。任何关于稳定可用解决方案的想法？理想将是一项艰巨的任务

4

1 回答 1

0

我会说使用 selenium（使用 phantomjs / ghostdriver）。有一个我偏爱的 python 绑定，当然 Java 和其他语言也受支持。

您可以通过每半秒获取一次 page_source 并检查差异来检查页面更改。在进行此类更改时，请使用 save_screenshot() 方法保存屏幕截图。

注意：我已经看到 save_screenshot 对于真正的大页面以零字节屏幕截图静默失败。虽然即使是 5-10 MB 的屏幕截图通常也可以，但每当我尝试使用具有数十万行的页面捕获屏幕截图时，我都会反复偶然发现这个问题。

于 2014-03-24T14:06:21.333 回答