gpt4 book ai didi

javascript - PhantomJS 渲染截图比实际页面高很多

转载 作者:行者123 更新时间:2023-11-30 00:20:16 25 4
gpt4 key购买 nike

我正在使用 PhantomJS 1.9.8 创建网站屏幕截图时遇到问题,创建的 PNG 比屏幕截图中看到的实际网站高得多。关于 PhantomJS 不考虑视口(viewport)大小的讨论尚未结束:https://github.com/ariya/phantomjs/issues/10619

但我认为在我的情况下,这或多或少是字体大小和/或类型的问题,您也可以在图像中注意到这一点。

也许有人遇到了同样的问题并且可以为此提供一个可能的“解决方法”,因为我需要屏幕截图与网站本身具有相同的大小。

enter image description here

页面使用以下 HTML:

<!DOCTYPE html>
<html>
<head>
<title>WSST</title>
<script src="js/test.js"></script>
</head>
<body style = "background-color: #FFFFFF">
<span class = "hey">Page Start</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Page End
</body>
</html>

这是传递给 PhantomJS 的 JS 文件:

var args = require('system').args;
var page = require('webpage').create();

var width = args[3];
var height = args[4];

page.viewportSize = {
width: width,
height: height
};


page.open(args[1], function(status) {

console.log('phantomjs: width ' + width + ' height ' + height);
console.log("Status: " + status);
if(status === "success") {
page.render(args[2] + '.png');
}
phantom.exit();

});

参数的解释:

  1. 网站的网址
  2. 渲染图像的文件名
  3. 用户视口(viewport)的宽度
  4. 用户视口(viewport)的高度

3 和 4 实际上是由 javascript 文件“test.js”计算得出的,该文件按此处建议的以下方式加载 HTML How to get height of entire document with JavaScript?

var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.clientWidth, html.offsetWidth );

如有任何帮助,我们将不胜感激。

最佳答案

在尝试使用 CSS 样式表后,我发现通过为页面上的所有 元素使用固定字体大小可以解决此问题。

显然,这个问题是由 PhantomJS/WebKit 在未明确定义时依赖“它自己的”字体大小引起的。

关于javascript - PhantomJS 渲染截图比实际页面高很多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33401776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com