imageDataURL() not working in IE

[Ben]

Hi,

I am using  chart.imageDataURL() to export my chart as an image as described in the documentation - http://docs.kendoui.com/api/dataviz/chart#methods-imageDataURL

This does not appear to work in IE10. I understand that it is only for browsers that support Canvas but I thought IE10 did and the following test certainly returns true. var canvasSupported = !!window.HTMLCanvasElement

I cant seem to run the example code for this method in the documentation from the dojo either. I allow popups and everything works fine in chrome and firefox but not IE.

Does anyone have any idea of what the problem might be?

Thanks

[T. Tsonev]

Hello,

It appears that the image export is working fine, but IE is having trouble displaying the image when set as URL.
Here's an updated version of the demo:

    var chart = $("#chart").data("kendoChart");
    var image = chart.imageDataURL();
    $("<img>").attr("src", image).appendTo(document.body);

 

-- Live demo --

We'll update the documentation to use this approach as well.

Regards,
T. Tsonev
Telerik

 

 

[Ben]

Thanks. This now works although it seems like it is going to take a fair bit of 'fiddling' (for IE) to get it to work as you had it in the original demo which was to open the image in a new window. 

[T. Tsonev]

Hello,

We haven't found a reliable way to open the image in new window in IE 10. It's probably a security restriction and its unlikely to be relaxed.

Regards,
T. Tsonev
Telerik

 

 

[Ben]

OK, thanks, yes I did read some stuff around it being a security restriction.

The approach I ended up taking which appears to work (incase it helps anyone else trying to do similar) was to put the image on the main page first in a hidden div and then append its contents to the open window. Like this:

var w = window.open();
var img = $("<img>").attr("src", image).appendTo(hiddenDiv);
var html = hiddenDiv.html();
$(w.document.body).html(html);

[T. Tsonev]

Hello,

I've got around to this problem and tried an alternative approach using msSaveBlob:
  <div id="chart"></div>
  <a download="chart-export.png" id="export" class="k-button">Export PNG</a>
  <script>
    $("#export").on("click", function() {    
      var chart = $("#chart").data("kendoChart");
      var imageDataURL = chart.imageDataURL();
      
      if (navigator.msSaveBlob) {
        var blob = toBlob(imageDataURL, "image/png");
        navigator.msSaveBlob(blob, this.getAttribute("download"));
      } else {
        this.href = imageDataURL;
      }
    });
    
    // See: http://goo.gl/qlg5dd
    function toBlob(base64, type) {
      var rawData = base64.substring(base64.indexOf("base64,") + 7);
      var data = atob(rawData);
      var arr = new Uint8Array(data.length);

      for (var i = 0; i < data.length; ++i) {
        arr[i] = data.charCodeAt(i);    
      }

      return new Blob([ arr.buffer ], { type: type });
    }
  </script>

 

-- Live demo --

Looks much cleaner to me and does actual export via a Save dialog for a change.
I'll include it in the documentation as an "official" solution to this problem.

I hope this helps.

Regards,
T. Tsonev
Telerik