5

我有一个网页的一部分，我需要在给定的时间间隔拍摄 gif 快照。快照需要是全页大小的分辨率，但是正如我所说，它只会到达页面上的某个位置（在这种情况下，它位于表格之后）。

像这样抓取页面快照图像的最佳方法是什么？我想把它扔到一个 cron 工作中然后忘记它，但我并不容易看到一个可以快速完成这个工作的工具。

解决方案：

根据@Eduardo 的出色指导，我实现了一个基于 phantomjs 和 imagemagick (Mac: brew install phantomjs& brew install imagemagick) 的干净快速的解决方案：

*注意：如果您想完全删除 imagemagick，只需将以下内容添加到 rasterize.js：page.clipRect = { top: 10, left: 10, width: 500, height: 500 }

#! /usr/bin/env bash
# Used with PhantomJS - rasterize.js source: http://j.mp/xC7u1Z

refresh_seconds=30

while true; do
    date_now=`date +"%Y-%m-%d %H%M"` 

    phantomjs rasterize.js $1 "${date_now}-original.png"  # just sucking in the first arg from shell for the URL
    convert "${date_now}-original.png" -crop 500x610+8+16 "${date_now}.png" # crop args: WIDTHxHEIGHT+LEFT_MARGIN+TOP_MARGIN
    rm "${date_now}-original.png"

    echo "Got image: ${date_now}.png - Now waiting ${refresh_seconds} seconds for next image..."
    sleep ${refresh_seconds}
done

而这里是上面phantomjs使用的js：

// As explained here: http://code.google.com/p/phantomjs/wiki/QuickStart

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 600, height: 600 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}
4

1 回答 1

4

这个问题已经在这里得到解答： 如何使用 Python 截取网站的屏幕截图/图像？

它在 09 年得到了回答，但该选项仍然非常有效。我将尝试扩展更多选项。

这些工具将为您提供整页快照，稍后您可以使用 imagemagick 轻松剪辑。

这些天你可能有的另一个选择是Phantomjs。Phantom 是一个在 node 上运行的无头浏览器，它允许您拍摄整个页面或页面的某个区域的图片。

看看这个例子：

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 600, height: 600 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}
于 2012-02-22T07:26:43.510 回答