Question

当使用PhantomJS进行屏幕捕获时，大部分页面的内容都是通过JavaScript加载或加载的，我遇到了问题。调用render（）会生成正确的图像，显示页面的完整内容，但是评估document.body.clientHeight会返回一个很小的值，可能是在添加任何内容之前页面的高度。

当PhantomJS渲染图像时，如何获得图像的高度/宽度？我不认为这是一个时间问题，我已经尝试交换事情的顺序或设置长时间的延迟，以确保一切都完全加载。

var wp = require('webpage');

var page = wp.create();

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

page.open(url, function (status) {

    if (status === 'success') {

        var f = "rendered.png";

        //Produces an image with height 4073px
        page.render(f);

        //height is only 150
        var height = page.evaluate(function() { return document.body.offsetHeight }),
            width = page.evaluate(function() { return document.body.offsetWidth });
            console.log(height,width);

    }

});

Answer 1

尝试使用page.onLoadFinished回调：

var wp = require('webpage');

var page = wp.create();

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

page.open(url);

page.onLoadFinished = function() {
    var f = "rendered.png";

    //Produces an image with height 4073px
    page.render(f);

    //height is only 150
    var height = page.evaluate(function() { return document.body.offsetHeight }),
        width = page.evaluate(function() { return document.body.offsetWidth });
    console.log(height,width);
};

在页面内容加载完成后，应返回正确的高度和宽度。我认为不同之处在于page.onLoadFinished等待所有内容完成加载，而不仅仅是200 OK响应等同于success状态。

PhantomJS：获取页面的渲染尺寸

1 个答案: