我如何以编程方式在本地主机上创建网页截图以生成工作流屏幕直播

How can I programmatically create screenshots of a web page on my localhost to generate a workflow-screencast?

本文关键字：网页 工作流 直播 屏幕 创建 主机 编程 方式      更新时间：2023-09-26

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

我使用grunt作为任务运行器，使用无头浏览器phantomjs来捕获页面。使用grunt-localscreenshots https://www.npmjs.org/package/grunt-localscreenshots很容易手动捕获页面。但它很麻烦，需要10秒才能完成任务。屏幕截图过程应该在后台进行，但只有在页面更改或保存时才会持续进行。

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

while true
do
ATIME=`stat .`
if [[ "$ATIME" != "$LTIME" ]]
then
phantomjs screenshot.js
LTIME=$ATIME 
fi
sleep 0.5
done

这是phantomjs-script 

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个重复的截图，有时根本不需要截图。原因可能是页面的呈现时间太长。对于稳定和可用的解决方案有什么想法吗?最理想的是一个grunt任务

我会说使用selenium(与phantomjs/ghostdriver)。我偏爱python绑定，当然也支持Java和其他语言。

您可以通过每半秒获取page_source并检查差异来检查页面更改。在这样的更改中，使用save_screen()方法保存截图。

注意:我看到过save_screen在真正大页面的零字节截图中无声地失败。尽管5-10 MB的屏幕截图通常都很好，但每当我尝试捕获具有数十万行页面的屏幕截图时，我就会反复遇到这个问题。

相关文章：