9

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 ?

Michael Low
  • 24,276
  • 16
  • 82
  • 119
  • 2
    Looking into the source, it seems the background image is not part of the page's stylesheet. It seems to be loaded dynamically via a script with the following settings object : `g_img={url:'/az/hprichbg/rb/PadovaItaly_ROW9592617414_1366x768.jpg',id:'bgDiv',d:'200',cN:'_SS',crN:'bIm',hash:'414',del:'50'}`. So it could very well be a timing issue rather than a problem with background images in general. – Boaz Jan 17 '13 at 11:42
  • Are you using the module's [default settings](https://github.com/ariya/phantomjs/wiki/API-Reference#wiki-webpage-module)? For example, is `javascriptEnabled` not set to `true`? – Boaz Jan 17 '13 at 12:17
  • 2
    Worked fine for me using the default rasterize.js from Phantom examples: https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js 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) and maybe the background isn't loaded yet, as it's being added using JavaScript, not CSS. – pawel Jan 17 '13 at 12:21
  • I'm using default settings and default rasterize.js too. I'll try your suggestion, thanks. – Michael Low Jan 17 '13 at 13:25
  • 2
    @pawel Yes, that works! After setting the timeout up to 500ms it now brings up the image. Please post it as answer so I can give you the bounty ^_^ boaz: Many thanks for your help too. – Michael Low Jan 17 '13 at 13:36
  • @mikel posted with extended explanation. – pawel Jan 17 '13 at 20:51
  • Thanks - I'll give the bounty when the system lets me ;) – Michael Low Jan 18 '13 at 07:10

2 Answers2

23

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.

pawel
  • 35,827
  • 7
  • 56
  • 53
  • 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 – asprin May 30 '13 at 13:24
  • @pawel: it does not work for https://angular.io/ as well. I tried increasing the timeout upto 15 seconds, before giving up. – openrijal Jun 10 '16 at 05:03
  • @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). – pawel Jun 29 '16 at 10:02
0

I came across a similar problem and found out that using webpage.onLoadFinished() worked in my case:

// create a page instance
var page = require('webpage').create();
page.viewportSize = {
    width: 800,
    height: 600
};

// create some HTML code with an image in the background
style = 'background:url(file:///var/www/test.svg) no-repeat;';
style += 'background-size: contain;';
style += 'width: 100%; height: 100%;';
page.content = '<html><body style="' + style + '"></body></html>';

// onLoadFinished() will be called when the page finishes the loading
var outImage = '/var/www/test.png';
page.onLoadFinished = function() {
        page.render(outImage);
        phantom.exit();
};
Alex Kläser
  • 9
  • 1