如何在渲染截图时使PhantomJS包含背景图像？

Question

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

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

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

Answer 1

使用Phantom示例中的默认rasterize.js为我工作得很好:

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

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

为了更好地理解为什么它应该有所帮助:Phantom请求页面并在它完全加载后将其呈现给图像(所有资产都已到位并执行脚本).但是背景图像是通过JavaScript加载的,浏览器无法事先知道会有更多的图像请求.在页面加载和截屏之间设置较长的延迟可以提供下载和显示可能已从脚本请求的图像的时间.