javascript – 如何使PhantomJS在渲染截图时包含背景图片?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使PhantomJS在渲染截图时包含背景图片?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用PhantomJS截取网页的截图,并在 https://github.com/ariya/phantomjs/wiki/Screen-Capture中详细介绍page.render()方法.

除了背景图像,这些都显示为空白,它工作正常.您可以看到一个问题的例子,如果你去http://screener.brachium-system.net/并输入http://www.bing.com/作为URL,背景图像应该有一个大的空白空间.

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

解决方法

使用默认值 rasterize.js from Phantom examples为我工作:

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

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

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

猜你在找的JavaScript相关文章