9

我正在使用 PhantomJS 截取网页截图，使用https://github.com/ariya/phantomjs/wiki/Screen-Capture中详述的 page.render() 方法。

它工作正常，除了背景图像，全部有时会出现空白。如果您转到http://screener.brachium-system.net/并输入http://www.bing.com/作为 URL，您可以看到问题的示例，背景图像应该有一个很大的空白区域是。

有没有办法强制显示背景图像？

4

2 回答 2

23

使用 Phantom 示例中的默认rasterize.js对我来说效果很好：

如果问题仍然存在，请尝试增加页面加载和呈现之间的延迟，将其设置为 200 毫秒（示例代码中的第 29 行）：

page.open(address, function (status) {
    /* irrelevant */
   window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
}

为了更好地理解它为什么会有所帮助：Phantom 请求页面并在页面完全加载后立即将其呈现为图像（所有资源都已到位并执行脚本）。但是背景图片是通过 JavaScript 加载的，浏览器无法提前知道会有更多的图片请求。在页面加载和截屏之间设置更长的延迟时间可以下载和显示可能从脚本请求的图像。

于 2013-01-17T13:43:00.580 回答
0

我遇到了类似的问题，发现在我的情况下使用pages.onLoadFinished()有效：

// create a page instance
var page = require('webpage').create();
page.viewportSize = {
    width: 800,
    height: 600
};

// create some HTML code with an image in the background
style = 'background:url(file:///var/www/test.svg) no-repeat;';
style += 'background-size: contain;';
style += 'width: 100%; height: 100%;';
page.content = '<html><body style="' + style + '"></body></html>';

// onLoadFinished() will be called when the page finishes the loading
var outImage = '/var/www/test.png';
page.onLoadFinished = function() {
        page.render(outImage);
        phantom.exit();
};
于 2016-03-23T09:03:41.277 回答