Question

我正在使用幻影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

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

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

Answer 2

来自fine manual：

clipRect（object）

此属性定义调用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();

您必须弄清楚左上角（top和left）的位置以及您想要裁剪矩形的大小（width和height）是。

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

Answer 3

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

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

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

随意发布在这里我正在监控这个，如果需要我可以提供帮助。

Phantom JS - clipRect - Javascript帮助

3 个答案: