幽灵JS - clipRect - Javascript帮助

Question

我正在使用PhantomJS截屏一个页面。

它有一个名为clipRect的功能。

请问有人可以告诉我如何修改以下代码来使用clipRect，这样我就只能获取部分屏幕截图而不是整个页面？ http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object

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();
}    

- jBeas

---

Brew 安装了错误版本的 PhantomJS，而且它安装的版本不支持 clipRect。已关闭。 - jBeas

Answer 1

如果您想要获取特定元素的截图，可以从此文章底部的getBoundingClientRect中获取clipRect所需的信息：

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

- Bo Jeanes

Answer 2

根据详细手册：

clipRect (对象)

此属性定义在调用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，但请先从那里开始并观察发生了什么。

- mu is too short

---

谢谢，问题在于使用bundle install安装的是v1.0.0版本，其中clipRect和几乎所有其他函数都不受支持，因为v1.0.0是最旧的版本。 - jBeas

我使用Brew进行安装，而不是bundle install。 - jBeas

@joel：所以你遇到了版本问题？版本问题是噩梦的内容。 - mu is too short

Answer 3

发生的情况是我正在使用brew，它安装了v1.0.0版本，其中clipRect和几乎所有其他函数都不受支持，因为v1.0.0是最旧的版本。

如果您遵循以下说明：http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X 然后右键单击编译文件并单击显示/查看内容（在Mac上），然后将可执行文件bin/phantomjs.app/Contents/MacOS/phantomjs复制到PATH中的某个目录中。

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

- jBeas