CODEWITHSUNDEEP
javascriptphantomjsheadlessheadless-browser
Michael Low
Michael Low

Reputation: 24506

How to make PhantomJS include background images when rendering screenshot?

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 ?

Upvotes: 9

Views: 11870

Answers (2)

Alex Kläser
Alex Kläser

Reputation: 9

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

Upvotes: 0

pawel
pawel

Reputation: 36995

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.

Upvotes: 23

Related Questions