Phantomjs: Black background when creating jpg with transparent background

Created on 7 Nov 2014 · 12Comments · Source: ariya/phantomjs

Hello,

I'm trying to create a _jpg_ screenshot of a page that has transparent background, using the simplest example, provided at http://phantomjs.org/screen-capture.html but it saves it with a black background. Saving it as a PNG (which supports transparency) seems to be working properly (as fixed in https://github.com/ariya/phantomjs/commit/1a25383307510161b8a80ab2d3032708adb7789b) but in our case the format is required to be JPG.

The browsers seem to display transparent backgrouns as white and even automatic exporting from transparent PNG to JPG saves it with a white background, so I guess that is the expected behaviour. Is the current situation a bug? Can someone suggest a workaround (except for using PNG, which is not an acceptable solution in our case)?

I'm attaching an example screenshot, generated by the example and the website that was used for that screenshot - http://www.phoenixx-handwerk.de)

transparent

Bug Confirmed Need code PJS core stale

Source

veseo

Most helpful comment

I still have this problem with the latest version of PhantomJS in Windows 10.

ownchoice on 14 Oct 2017

👍4

All 12 comments

I assume you're using PhantomJS 2, isn't it?

vitallium on 7 Nov 2014

Sorry, forgot to specify - that problem persists with versions 1.9.1 and 1.9.7, no other versions were tested. Is it fixed in PhantomJS 2?

P.S. which version(s) are counted as PhantomJS 2? I don't see such release on either the homepage or on github.

veseo on 7 Nov 2014

Hm, anyway. I know where is the problem. This will be fixed in the next minor version of PhantomJS 1.x.

vitallium on 7 Nov 2014

Cool, thanks alot!

veseo on 7 Nov 2014

I am using 2.0.0 and have same issue. Is this a known issue in version 2.0 as well?

namssi5 on 31 Mar 2015

Using the Windows builds from Bitbucket, 2.0.0 and 1.9.8, both have significant black background issues with JPG. Minor issues with PNG as well. PDF does not share this issue. If/when these issues are fixed, new builds would be appreciated.

ryanohoro on 10 Sep 2015

Here's a partial workaround for the issue. This code injects a style element with a white background color into the top of the section of the HTML content. This should be before any style information on the page is set, so it won't override any user-defined background color.

This fix suggests that the rendering engine assumes black is the default background color if no background color is defined in the document.

expectedLocation = 'http://www.example.com';
idx = page.content.indexOf('<head>') + 6;
if (idx > 0) {
    page.setContent(page.content.slice(0, idx) + "<style> body { background-color: #ffffff; } </style>" + page.content.slice(idx), expectedLocation);
}
page.render(output);

ryanohoro on 10 Sep 2015

👍1

I confirm this is still a problem in the latest development code, which makes it a regression from 1.x.

In principle, fixing this is not difficult, but (as I mentioned on #12977) the fix needs to be limited to JPEG (and any other format that doesn't support transparency).

zackw on 22 Dec 2015

Any updates about this?

sfontana on 8 Aug 2016

👍2

I still have this problem with the latest version of PhantomJS in Windows 10.

ownchoice on 14 Oct 2017

👍4

I would be happy with a default white background since thats what Chrome and FF use as default

purefan on 27 Oct 2017

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!