为什么PhantomJS将此网站渲染为黑色方形？

我正在调查使用PhantomJS来做一些自动化的图像渲染，基于现有的网页JavaScript代码库。为什么PhantomJS将此网站渲染为黑色方形？

但是，使用提供的rasterize.js示例代码将our site呈现为600x600的黑色图像。其他网站似乎呈现良好。

现在，我们的网站默认使用WebGL，但有一个我已经检查过的2D回退功能（例如，在禁用WebGL的Chrome中） - #map=2d标志应该跳过使用WebGL。

还有什么原因可以导致它产生这种纯黑色的图像？

也许它是在页面加载之前进行截图？

有没有什么方法可以调试呢？

我在我的Macbook上的Ubuntu Precise VM中使用了预编译的Ubuntu二进制文件2.0.1-development。

来源

2015-08-08 Steve Bennett ㄹ

你有在地方幻影任何错误日志代码？直到我添加了[这个'Function.bind（）'polyfill]（https://github.com/ariya/phantomjs/issues/10522#issuecomment-39248521）之前，我在运行基于React的应用程序时遇到了很大的问题。因人而异。幻影的JS引擎是相当古老的，所以如果你使用更新的JS功能，他们不太可能工作 – Bojangles

请注册到'onConsoleMessage'，'onError'，'onResourceError'，'onResourceTimeout'事件（[Example]（https：/ /gist.github.com/artjomb/4cf43d16ce50d8674fdf））在rasterize脚本中。也许有错误。也许你需要等待屏幕截图之前。 –

谢谢@ArtjomB。这些额外的日志记录钩子没有任何显示。 –

您必须等待页面加载一点。使用（基于PhantomJS工具）CasperJS一切工作正常：

var casper = require('casper').create();//Create casper object 

casper.options.viewportSize = {width: 900, height: 900};//Set viewport 
casper.start().thenOpen('http://staging.nationalmap.nicta.com/#map=2d', function() { 

}); 
casper.wait(10000, function(){//wait for 10 seconds so we are sure page is loaded 
    this.capture('small2d.png');//take a screenshot 
}); 

casper.run();

来源

2015-08-11 11:35:33 MrD

哦，太棒了！有没有一种可靠的方法来知道页面何时准备好，而不是等待一些预定义的时间？ –

是的，您可以等待加载特定资源。下面是可用的功能（[API]（http://docs.casperjs.org/en/latest/modules/index.html））： 'WAITFOR（） waitForAlert（） waitForPopup（） waitForResource（） waitForUrl（） waitForSelector（） waitWhileSelector（） waitForSelectorTextChange（） waitForText（）' – MrD

非常感谢。 –

为什么PhantomJS将此网站渲染为黑色方形？

回答

相关问题