How to make PhantomJS include background images when rendering screenshot?

Michael Low picture Michael Low · Jan 15, 2013 · Viewed 11.6k times · Source

I'm using PhantomJS to take screenshots of a webpage, with the page.render() method as detailed in https://github.com/ariya/phantomjs/wiki/Screen-Capture .

It works fine except for background images, which all somtimes appear blank. You can see an example of the problem if you go to http://screener.brachium-system.net/ and enter http://www.bing.com/ as the URL, there's a big empty space where the background image should be.

Is there a way to force background images to be displayed ?

Answer

pawel picture pawel · Jan 17, 2013

Worked fine for me using the default rasterize.js from Phantom examples:

If the problem persists try to increase the delay between page load and rendering, it's set to 200ms (line 29 in the example code):

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

To better understand why it should help: Phantom requests the page and renders it to an image as soon as it's fully loaded (all assets are in place and scripts executed). But the background image is loaded via JavaScript and the browser has no way to know in advance there are going to be more image requests. Setting longer delay between page load and taking the screenshot gives time to download and display images that may have been requested from a script.