How to make PhantomJS include background images when rendering screenshot?

Question

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 ?

Solution

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.

Comments

[asprin]

I was looking for something like this - introduce a delay and then take a screenshot so that the google chart is loaded successfully. +1 to you for that

[Glycerine]

Of Course - It's so simple!!

[openrijal]

@pawel: it does not work for angular.io as well. I tried increasing the timeout upto 15 seconds, before giving up.

[pawel]

@openrijal: AFAIK Phantom is a little behind with the WebKit version under the hood, so there's a chance some websites don't render correctly (or at all).