我有一个网页的一部分,我需要在给定的时间间隔拍摄 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);
}
});
}