Saving Raphaël image as PNG on Internet Explorer

Question

I have some nice graphics done using Raphaël (a JavaScript library), and I want to add a feature to save it as a PNG file.

This is simple on every browser except Internet Explorer, because on non-Internet Explorer browsers I get SVG as an output from Raphaël, and then I can convert it to canvas (using cansvg library) and canvas has a toDataURL() method. But on Internet Explorer, Raphaël outputs VML. I can't use the Chrome frame plugin. Why?

Users of my application choose Internet Explorer just because it is preinstalled on Windows, and they don't have permission to install anything else. So they can't install this plugin. So my second idea was to get an SVG string on Internet Explorer, pass it to cansvg to get a canvas and then use flashCanvas.

I tried to trick Raphaël to think it's running on a non-Internet Explorer browser and get SVG as output, but I failed, as Raphaël use some JavaScript functions that are absent in Internet Explorer to produce SVG.

So how do I accomplish this task under Internet Explorer?

Answer 1

RaphaelJS does not use canvas. It uses VML in IE, but SVG in all other browsers.

As the OP said, you can grab the raw SVG (as it's a whole SVG doc) and download that, he is looking for some similar functionality with VML.

The only way I could think to do it, is get IE to send the VML data (if that is even possible) back to a server which does the conversion to PNG and downloads it.

However, as you want a PNG, you are probably better going for canvas from the start as you likely don't need the vector side of the graphics if you are then converting to bitmap. Checkout canvas and the google IE canvas script to see if you can use that instead.

As for "Browser support for generating graphics is still pretty limited", it isn't. Check out RaphaelJS.com demos, it's perfectly feasible and a good solution. The only problem is IE <9 which hasn't adopted any modern technologies like HTML5, CSS3 or SVG.

Anything which supports Canvas or the google IEcanvas can also produce decent results.