Internet Explorer toDataURL() alternative?

StackOverflow https://stackoverflow.com/questions/633724

  •  10-07-2019
  •  | 
  •  

Question

So I need to save image data drawn on a <canvas> element. And there is the toDataURL() method which works in most modern browser.

Except... you guessed it... Internet Explorer.

I've searched the internet but everywhere people say I should use SVG/VML to save the data, but they never mention how. I have not any experience with SVG/VML in IE so how do I save image drawn in a canvas element in Internet Explorer? Does anyone have experience?

At the moment, I had to duplicate the drawing code on both the client and on the server which is starting to get complicated. So if there is a way I could extract the image drawn on the canvas tag on the client (or server) side that'd certainly help.

Thanks!

Was it helpful?

Solution

You might be able to get the VML and same that, but that is an XML format, so that's probably not what you want. There's not way you can get an image from IE without using a plug-in.

OTHER TIPS

  1. canvas.toDataURL works in IE9.

  2. If you really need it for old IE .. well.. i'll just give you a quote

toDataURL won't be supported because of nature of the method used by Explorer Canvas : VML. We didn't find a way to rasterize VML to bitmap images using JS, and not even with a server side script. So if you really need toDataURL in IE, you'll have to use FxCanvas (http://code.google.com/p/fxcanvas/) or FlashCanvas (http://flashcanvas.net/) : two solutions based on Flash.

http://code.google.com/p/explorercanvas/issues/detail?id=77

I had the same problem. What I wanted to do was convert the canvas to an image, then open it in a new tab. I found that converting it was not the problem, but opening in a new link was. I solved it by generating the image, putting it into an img tag, then including that in the new page. I then opened said new page using this tutorial - http://www.javascripter.net/faq/writingt.htm

Here is what I did

var canvas = document.getElementById('canvas1');
var dataURL = canvas.toDataURL();
var width = parseInt($("#main").width()); //main is the div that contains my canvas
var height = parseInt($("#main").height());
newWindow("<img src=\"" + dataURL + "\"/>");
function newWindow(content) {
    top.consoleRef = window.open("", "Organisational Structure",
        "width="+width+",height="+height
        + ",menubar=0"
        + ",toolbar=1"
        + ",status=0"
        + ",scrollbars=1"
        + ",resizable=1")
    top.consoleRef.document.writeln(
        "<html><head><title>Console</title></head>"
        + "<body bgcolor=white onLoad=\"self.focus()\">"
        + content
        + "</body></html>"
    )
    top.consoleRef.document.close()
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top