CODEWITHSUNDEEP
javascriptphantomjs
afithings
afithings

Reputation: 691

PNGs half-rendering with PhantomJS and node phantom module?

I'm running into an issue using PhantomJS and phantom to render a webpage to a PDF.

What I'm noticing is that, while SVG and JPGs load "fully" into the generated PDF, PNG images do not, but only on their first appearance in the document. In other words, the first image is partially faded, then the subsequent images are not faded at all.

I've checked the onResourceLoaded callback, and the images are loading properly from the server. I've tried swapping http and https to see if that made a difference. Tried loading from a local, static folder to see if it was a network delay. And I've tried wrapping page.render in a setTimeout (as many suggest on SO in other questions) to no avail.

Is this a known issue? Is there a better workaround to solve the faded out PNG? Unfortunately, in this project, I don't have control over what image type comes into me.

Upvotes: 2

Views: 505

Answers (2)

rugrln
rugrln

Reputation: 138

This issue occurs with JPGs as well. I've encountered this issue converting HTML files to PDF using both PhantomJS (through the html-pdf package) and through wkhtmltopdf.

With PhantomJS, I noticed the issue was related to use of transparent colours using rgba() in borders in other elements. I simply replaced those transparent colours with HEX codes, and the transparency issue has disappeared.

In short, remove any rgba() expressions, particularly if they use transparency.

Upvotes: 1

Boris Joffe
Boris Joffe

Reputation: 171

I ran into the exact same issue and accidentally discovered that forcing a border color on all elements fixed the issue. In my case, the affected/faded elements were images (jpg) and charts.

So, something like

* {
    border-color: black !important;
}

Upvotes: 1

Related Questions