Programatically generate PNG from Raphael.JS image

Question

I'm writing an app that lets users generate images with Raphael.JS. One of the secondary features I want is to generate a PNG of the Raphael canvas.

Here's the general pipeline in my head:

1. User inputs parameters
2. We generate JS with Raphael calls
3. We generate a JS wrapper that does the above and calls .innerHTML on the containing div, giving us SVG (which we then send somewhere)
4. We execute the JS wrapper
5. The SVG is sent to ImageMagick and out pops a PNG

Step 4 is the step I need some guidance on. The user could be using IE; we have no guarantee that the JS is ever executed in an SVG browser. In any case, we'd need this to run server-side for it to be reliable. So here are the three possibilities I've come up with so far:

• Install Firefox on the server and run the result of (3) in Firefox. This option sucks because installing FF means installing a bunch of X stuff on our server, running FF carries a lot of overhead, and I don't really want to muck about with tracking the process and killing it once it's done.
• Use Node.js + jsdom (http://github.com/tmpvar/jsdom). Downside here is that it's not clear how supported jsdom is - the purported site, jsdom.org, doesn't really exist. Also, I can't find any documentation.
• Maybe do something with Rhino? As far as I can tell, Rhino has even more meager DOM support than Node.

So...all three of those options kind of suck. I think. Am I wrong about something? Is there another way?

Answer 1

You could try transforming the VML to SVG on the server before running it through ImageMagick. I know the project itself is PHP, but the conversion is done with XSL (the file is in the download archive) so ought to be portable to any server platform.

Answer 2

Once you have your SVG document serialized on the client, all you need is an SVG renderer and/or rasterizer running on your server to produce the PNG. It's not clear to me what you think a JS wrapper will do, or why it is needed. As the SVG document you're sending will not contain dynamic content, all you should need is to send the serialized SVG document to a rasterizer on the server in order to rasterize it as PNG.

The SVG renderer/rasterizer could simply be a CGI script which calls ImageMagick, or could be something more sophisticated. Personally, I would recommend setting up a servlet running Apache Batik, which includes an SVG Rasterizer, and can be called programmatically. A quick google search indicates that this is a pretty common task for Batik: http://www.mail-archive.com/[email protected]/msg06116.html