Menu
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!
765
canvas.toDataURL works in IE9.
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
136
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()
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
