javascript - 如何让 PhantomJS 在渲染截图时包含背景图片？

Question

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

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

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

Answer 1

使用默认的 rasterize.js from Phantom examples 对我来说效果很好:

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

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

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