如何使 PhantomJS 截图尺寸与实际网页相对应？答案

【问题标题】：How to make correspond PhantomJS screenshot dimension with an actual webpage?如何使 PhantomJS 截图尺寸与实际网页相对应？
【发布时间】：2013-04-18 08:35:18
【问题描述】：

我正在使用 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 渲染后，唯一不会给出相同大小的元素是按钮...并且按钮的渲染在浏览器之间也有所不同...

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

【问题讨论】：

标签： javascript dom screenshot phantomjs dimensions

【解决方案1】：

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

【讨论】：

不，我说的是从整个网页（例如在桌面浏览器上看到的）截取屏幕截图，并让此屏幕截图与实际网页尺寸相对应。目标是在屏幕截图上显示鼠标位置（在实际网页中）。为此，我需要使尺寸对应。无论如何，谢谢你的提议。