1

I'm having trouble adjusting PhantomJS to create a PNG file that matches the original browser presentation.

Here is the entire sample html file. It's a sankey diagram creating using rCharts and d3-sankey. (You'll need to save the file to your hard drive and view it from there.)

I'm running on Windows and using rasterize.js:

>> phantomjs.exe rasterize.js test.html test.png

ISSUE: Below is a snip of one of the text strings when viewed in a browser:

enter image description here

And here is a snip of the same string from the PNG created by PhantomJS:

enter image description here

How do I make the text-shadow go away? I've played around with various CSS attributes (text-shadow) and webkit-specific attributes (e.g., -webkit-text-rendering), but can't seem to make it go away.

Is this a setting in PhantomJS? in the underlying webkit? or somewhere else?

VividD
  • 10,456
  • 6
  • 64
  • 111
John Leonard
  • 291
  • 2
  • 9

2 Answers2

2

rCharts has an undocumented function called take_screenshot that uses CasperJS (which in turn uses PhantomJS to take screenshots of rCharts created visualizations on a given html page.

For example, I forked the example you provided, renamed it as a html file, which you can view here.

I ran rCharts::take_screenshot('http://rcharts.io/viewer/?7063641'), which results in the following screenshot. The take_screenshot function uses system commands, and work well on a Mac. I have not tested it on Windows, so YMMV.

NOTE: You will need to install the dev branch for this feature.

screenshot

Ramnath
  • 54,439
  • 16
  • 125
  • 152
  • Thanks for the quick reply! I'll experiment with this feature, but it doesn't directly answer the question. Zooming into the image just posted, you'll see that the white shadow exists. I'm looking for suggestions to make these shadows go away. Using your URL I did see that Firefox renders the image without the text-shadow, while Chrome does render the image with the text shadow. This suggests an underlying engine difference. – John Leonard Oct 21 '13 at 10:11
  • I'm using rCharts::save to store the HTML to disk for subsequent rendering in PhantomJS. How do I add additional style elements (e.g., the .node element override) to the `` block? – John Leonard Oct 21 '13 at 10:56
  • Your best bet is to directly modify the HTML file you saved. You can do it programatically by using regular expressions to insert custom style elements, or a little more refined stuff with a package like XML. – Ramnath Oct 21 '13 at 11:30
2

OK - I found the issue. It is related to browser display differences. SANKEY.CSS sets the text shadow:

.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}

The text-shadow is ignored in Firefox (my default browser) and is properly rendered using Chrome (thanks @ramnath for cluing me into the browser differences!). PhantomJS uses webkit to render pages (which works properly) while Firefox uses gecko (which obviously doesn't implement text-shadow properly.) Fiddling with text-shadow in my original post didn't affect any changes - because Firefox wasn't rendering any changes and I was experimenting in the browser.

SO, the fix is to override .node text-shadow in my main HTML file. After the change, all is rendering as I prefer in the PhantomJS-created PNG.

.node text {
pointer-events: none;
text-shadow: 0 0px 0 #fff;
}

Lesson: to properly test HTML for rendering in PhantomJS on Windows, use Chrome to preview. Both use webkit as the underlying rendering engine.

John Leonard
  • 291
  • 2
  • 9