Phantom JS - clipRect - Javascript帮助

Question

我正在使用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();
}    

Answer 1

发生的情况是，我使用的是brew，它安装的是1.0.0版，其中clipRect和几乎所有其他功能都不受支持，因为1.0.0版是最旧的版本。

如果您遵循以下说明：http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X

然后右键单击编译后的文件并单击show/view contents (在mac上)，然后将可执行文件bin/phantomjs.app/Contents/MacOS/phantomjs复制到路径中的某个目录中。

请随时在这里发帖，我正在监控这一点，如果需要的话，我可以提供帮助。

Answer 2

如果您正在尝试获取特定元素的屏幕截图，您可以根据this article底部的内容从getBoundingClientRect获取clipRect的必要信息

page.clipRect = page.evaluate(function() {
    return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect(); 
});

Answer 3

从fine manual

clipRect (object)

此属性定义调用render()时要栅格化的网页的矩形区域。如果未设置剪切矩形，render()将处理整个网页。示例：phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }

因此，尝试在调用render之前设置clipRect

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

你必须弄清楚左上角的位置(top和left)以及你想要的剪裁矩形的大小(width和height)。

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