How can I convert HTML with CSS3 & SVG to an image - preferably from Java?

2
votes

I'm trying to find a way to rasterize HTML quickly and efficiently at scale. Preferably this would use Java, but I'm open to other options as well.

Given an HTML input that has CSS3 including 3D transforms and SVG, I want to create a PNG that could be served to older browsers or used as a thumbnail on social media. The idea is that I might have an SVG on a webpage which then uses CSS3 to provide 3D perspective and I want an image from it.

Is there a pure Java way to do this? I want to do these conversions in a server environment (headless). If not, something like PhantomJS, but that doesn't support CSS 3D transforms. Of course I could use Batik to convert an SVG to an image, but the key here is getting HTML using a CSS 3D transform to get rasterized.

Bonus points if I could take a page with CSS3 or SVG animation and create multiple frames from that to make an animated gif.

1
javacsssvg

1 Answers

1
votes

You could use nodeshot which directly supports CSS 3D and HTML5 or possibly try slimer-js(I haven't checked too closely on this one). Also, once you have screenshots pulled, you could use FFMPEG to combine the images into an animated GIF.