10

当使用 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);

    }

});
4

1 回答 1

12

尝试使用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。

于 2013-09-24T14:58:02.457 回答