PhantomJS 渲染的截图比实际页面高很多答案

【问题标题】：PhantomJS rendered screenshot is much higher than the actual pagePhantomJS 渲染的截图比实际页面高很多
【发布时间】：2016-01-28 20:37:45
【问题描述】：

我正在使用 PhantomJS 1.9.8 创建一个网站截图，但遇到的问题是，创建的 PNG 比截图中看到的实际网站要高得多。关于 PhantomJS 不尊重视口大小的讨论尚未结束：https://github.com/ariya/phantomjs/issues/10619

但我认为这或多或少是字体大小和/或类型的问题，您也可以在图片中注意到。

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

以下 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();

});

参数说明：

网站网址
渲染图像的文件名
用户视口的宽度
用户视口的高度

3 和 4 实际上是由加载 HTML 的 javascript 文件“test.js”计算得出的，如下所示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 );

对此的任何帮助将不胜感激。

【问题讨论】：

您是否尝试过添加 reset.css 样式表？
我刚刚尝试了这个code.google.com/p/phantomjs/source/browse/website/…，这改变了我本地浏览器中页面的布局，但phantomjs图片保持不变。

标签： javascript css height phantomjs

【解决方案1】：

在玩过 CSS 样式表之后，我发现这个问题可以通过对页面上的 all 元素使用固定的字体大小来解决。

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

【讨论】：