4

我正在使用 phantom js 截屏页面

http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering

它有一个名为 clipRect 的功能

http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object )

有人可以告诉我如何将以下代码修改为我们的clipRect，这样我只能得到部分截图而不是全部截图吗？

if (phantom.state.length === 0) {
if (phantom.args.length !== 2) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    var address = phantom.args[0];
    phantom.state = 'rasterize';
    phantom.viewportSize = { width: 600, height: 600 };
    phantom.open(address);
}
} else {
    var output = phantom.args[1];
    phantom.sleep(200);
    phantom.render(output);
    phantom.exit();
}
4

3 回答 3

4

如果您尝试获取特定元素的屏幕截图，您可以clipRect从本文getBoundingClientRect底部获取必要的信息：

page.clipRect = page.evaluate(function() {
    return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect(); 
});
于 2013-04-19T01:41:00.117 回答
2

来自精美手册：

剪辑矩形（对象）

此属性定义在调用 render() 时要光栅化的网页的矩形区域。如果没有设置裁剪矩形，render() 将处理整个网页。

例子：phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }

clipRect因此，请在致电之前尝试设置render：

var output = phantom.args[1];
phantom.sleep(200);
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
phantom.render(output);
phantom.exit();

您必须弄清楚左上角 ( topand left) 的位置以及您希望剪切矩形的大小 ( widthand )。height

您可能可以在调用clipRect之前设置任何时间，render()但从那开始，看看会发生什么。

于 2011-06-22T04:13:10.423 回答
0

发生的事情是我正在使用 brew 并且它正在安装 v 1.0.0，其中不支持 clipRect 和几乎所有其他功能，因为 v 1.0.0 是最旧的版本。

如果您按照以下说明操作：http ://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X

然后右键单击已编译的文件并单击显示/查看内容（在 Mac 上）然后将可执行文件 bin/phantomjs.app/Contents/MacOS/phantomjs 复制到 PATH 中的某个目录。

随时在这里发帖，我正在监视这个，如果需要我可以提供帮助。

于 2011-07-01T02:35:24.743 回答