2

我正在使用 PhantomJS 从我的网页中截取屏幕截图。代码很简单

var page = require('webpage').create();
page.open('Target_Zone_Selection.html', function () {
    page.viewportSize = {width: 1024, height: 800};
    page.render('test.png');
    phantom.exit();
});

一切正常，但我想做的是使屏幕截图与实际网页相对应（如在具有准确视口大小的浏览器上看到的那样）。我的最终目标是获取鼠标位置并在屏幕截图上对应这个位置。

还有一个问题：网页大小与 PhantomJS 的渲染不同。我尝试了几种解决方案，例如通过 DOM 并获取每个偏移位置以查找屏幕截图的尺寸，但始终存在问题。此方法适用于宽度，但不适用于高度。

有人可以描述一种使网页和屏幕截图对应的方法吗？非常感谢 ！

更新：问题被发现：我的网页包含画布、按钮、文本表单和一些 html。一旦使用 PhantomJS 渲染，唯一不会给出相同大小的元素是按钮......并且按钮的呈现在浏览器之间也不同......

有什么建议可以预测按钮的渲染大小吗？

4

1 回答 1

0

您是在谈论移动设备的视口标签吗？像 PhantomJS 这样的“桌面”浏览器不支持视口。您需要查看支持移动浏览器的工具或服务（例如https://browshot.com/）

于 2013-04-18T21:14:16.463 回答