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

How to make correspond PhantomJS screenshot dimension with an actual webpage?

本文关键字：网页 相对 PhantomJS 何使      更新时间：2023-09-26

我正在用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是按钮…不同浏览器的按钮呈现也不同…

有什么建议吗?

你是在谈论移动设备的viewport标签吗?像PhantomJS这样的"桌面"浏览器不支持视口。你需要寻找支持移动浏览器的工具或服务(比如https://browshot.com/)

相关文章：