首页 文章

PhantomJS渲染截图远远高于实际页面

提问于
浏览 次
2

我正在使用PhantomJS 1.9.8创建一个网站截图，遇到问题，创建的PNG远远高于屏幕截图中显示的实际网站 . 关于PhantomJS还没有结束关于视口大小的讨论：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();

});

Arguments 的说明：

  • 网站的网址

  • 渲染图像的文件名

  • 用户视口的宽度

  • 用户视口的高度

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 );

任何有关这方面的帮助将非常感激 .

javascript css height phantomjs

1 回答

  • 1

    在使用CSS样式表之后，我发现通过在页面上使用 all 元素的固定字体大小来解决此问题 .

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

    回复于

相关问题