0

I am using toDataURL() method of a canvas object. It works on IE9 and Chrome. But it is not supporting for IE7 and IE8. I found this link

https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062

It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.

I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.

Thanks in advance

Spudley
  • 166,037
  • 39
  • 233
  • 307
Kumar Kush
  • 2,495
  • 11
  • 32
  • 42

2 Answers2

3

IE7/8 does not support either Canvas or SVG.

It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.

The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/

I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.

I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/

Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.

Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • First thing, I am able to plot graphs on IE 7/8/9 using **Flot API**, which uses Canvas to plot the graph. That means Canvas is supported in IE 7/8. I have seen the code generated. I checked everything u mentioned. Raphael library looks most promosing. – Kumar Kush Oct 04 '11 at 15:20
  • 3
    Canvas is *not* supported by IE7 or IE8. If the Flot API manages to get it working then it must be doing something internally that is similar to the IE-Canvas hack I linked to. – Spudley Oct 04 '11 at 15:25
  • My ultimate goal to is to save the graphs on the page in the form of image (by getting **base64** data of the image, using JavaScript) and send to server or save locally. I can do that on Chrome and IE 9, and, as expected, **NOT** on IE 7/8. Where as the functionality is most desired in IE 7. Can we convert SVG graphs to image using JavaScript? [link](https://raw.github.com/sampula/SVG.toDataURL/master/svg_todataurl.js) In this URL, a method **.toDataURL** has been created for SVG, but internally it again uses **Canvas.toDataURL**. – Kumar Kush Oct 05 '11 at 06:29
  • saving the SVG to an image... it's not something I've tried to do, but has been discussed here before. See http://stackoverflow.com/questions/3975499/conversion-of-svg-to-jpeg/3976034#3976034. You might also find help on the Raphael site (a glance at their discussion group turned up quite a lot of results when I search for 'save') – Spudley Oct 05 '11 at 07:58
  • Thanks Spudley.......Raphael library really does work on IE7. And that too, wonderfully. I'll see if I can reach somewhere using it. – Kumar Kush Oct 09 '11 at 07:23
2

I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.

Shamaila Tahir
  • 988
  • 2
  • 8
  • 17
  • Check this link. It might help. [link](https://github.com/sampula/SVG.toDataURL)....but I am doubtful – Kumar Kush Oct 05 '11 at 06:31
  • Don't think it will help you. You want to save the charts your own application has created on the client's canvas? You must have used some data and calculations to create the chart on client side. You can use same data and calculations to create an image of the chart at the server side using an image processing library like imagemagick. This is what I had done. – Shamaila Tahir Oct 05 '11 at 07:10
  • You are right Shamaila. I was also thinking on same lines. Your comment confirms my thought. I am going to the same. Thanks a lot – Kumar Kush Oct 09 '11 at 07:19