0

I have svg content and I want to draw this svg on canvas.Then I want dataURL of canvas but IE gives error of SecurityError.I have spent whole day but i didn't get right thing.Below is code that I have done so far.

var canvas = document.getElementById("canvas");
canvas.setAttribute("height", 500);
canvas.setAttribute("width", 500);
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    var image = canvas.toDataURL('image/png'); 
 };

img.onerror = function () {
 };

img.src = url;

On above code everything works fine in mozilla and chrome but IE gives an error on canvas.toDataURL. How can I fix this?? Please help me and thanks in advance.

Brijesh Gandhi
  • 560
  • 2
  • 10
  • 27
  • 1
    I suspect the problem is that your SVG itself is a data URI; data URI's are treated in some situations as if they were cross-origin files. (In general, you can draw cross-origin images to canvas, but then the canvas becomes "tainted" and you can't read the data back or convert it to a data URI.) Since you're creating the SVG code yourself, there's no security risk, but it depends on how they have implemented the data URI scheme. – AmeliaBR Nov 20 '14 at 23:19
  • @AmeliaBR Actually I am using `Highcharts`-third party chart tool and I just grab svg code as string from it and draw it on canvas using Blob as per above code , it works well in all browser except `IE`. so how can I overcome on this specially on IE..thanks – Brijesh Gandhi Nov 21 '14 at 05:46

1 Answers1

0

I have solved this issue using Canvg.js

Brijesh Gandhi
  • 560
  • 2
  • 10
  • 27