3

I'm investigating using PhantomJS to do some automated image rendering, based on an existing web javascript codebase.

However, using the provided rasterize.js sample code renders our site as a 600x600 black image. Other sites seem to render ok.

Now, our site does use WebGL by default, but has a 2D fallback which I've checked works (eg, in Chrome with WebGL disabled) - and the #map=2d flag should skip using WebGL.

What other reasons could cause it to produce this pure black image?

Perhaps it's taking a screenshot before the page has loaded at all?

Are there any ways to debug this?

I'm using the pre-compiled Ubuntu binaries, 2.0.1-development, in an Ubuntu Precise VM on my Macbook.

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • Do you have any error logging code in place for Phantom? I had big problems running a React-based app until I added [this `Function.bind()` polyfill](https://github.com/ariya/phantomjs/issues/10522#issuecomment-39248521). YMMV. Phantom's JS engine is quite old so if you're using newer JS features they're unlikely to work – Bojangles Aug 08 '15 at 14:43
  • Please register to the `onConsoleMessage`, `onError`, `onResourceError`, `onResourceTimeout` events ([Example](https://gist.github.com/artjomb/4cf43d16ce50d8674fdf)) in the rasterize script. Maybe there are errors. Maybe you need to wait before taking a screenshot. – Artjom B. Aug 08 '15 at 16:07
  • Thanks @ArtjomB. Nothing appears from those additional logging hooks. – Steve Bennett Aug 09 '15 at 00:34
  • @Bojangles thanks for the suggestion - looks like `Function.bind()` is supported in this version of PhantomJS, but maybe there are other features missing. Not trivial to test adding polyfills to the pages, but will have a go. – Steve Bennett Aug 09 '15 at 00:35

1 Answers1

1

You have to wait a little bit for page to load. Using CasperJS (tool based on PhantomJS) everything works fine: 

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();

enter image description here

MrD
  • 2,423
  • 3
  • 33
  • 57
  • Oh, great! Is there a reliable way to know when the page is ready rather than waiting some pre-defined amount of time? – Steve Bennett Aug 12 '15 at 02:36
  • Yes, you can wait for specific resource to be loaded. Here are available functions ([API](http://docs.casperjs.org/en/latest/modules/index.html) ): `waitFor() waitForAlert() waitForPopup() waitForResource() waitForUrl() waitForSelector() waitWhileSelector() waitForSelectorTextChange() waitForText()` – MrD Aug 12 '15 at 08:00