Question

我正在使用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渲染后，唯一不能提供相同尺寸的元素是按钮...而且按钮的渲染也因浏览器而异...

有关预测按钮渲染大小的建议吗？

Answer 1

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

如何使用实际网页制作对应的PhantomJS截图尺寸？

1 个答案: