javascript – 如何从shell获取网页的一部分快照？

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

最佳答案

这个问题已在这里得到解答：
How can I take a screenshot/image of a website using Python?

它在09年被回答,但该选项仍然非常有效.我会尝试扩展一些更多选项.

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

你现在可能拥有的另一个选择是Phantomjs.幻影是一个无头浏览器,可以在节点上运行,它可以让你拍摄整个页面或只是页面的一个区域.

看看this example：

var page = new WebPage(),200);
        }
    });
}