Using toDataUrl on a canvas result in SecurityError in IE

Question

Hi I am in need of converting an svg generated by d3.js into a png.This is requried because we are sending our page html to the server that is then passed to ABCPDF and then convert to a pdf file.

We absolutely must support IE9+ the latest version of chrome and latest version of firefox.This is what I have so far:

    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", 360);
    canvas.setAttribute("height", 460);
    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 png = canvas.toDataURL("image/png");
        $('#main-chart').append('<img src="' + png + '"/>');
        $('#main-chart svg').remove("svg");
        DOMURL.revokeObjectURL(png);
    };
    img.src = url;

Now this solution works very well on chrome and firefox but for IE it does not work.

When canvas.toDataURL("image/png") gets called a Security error gets thrown.

From what I managed to find online is that this happens because IE does not support CORS when calling toDataUrl().

Has anyone managed to find a work around to this issue?

I have seen other similar questions asked at stackoverflow but could not find one with a solution.

have you tried [canvg](https://github.com/gabelerner/canvg)? + I think that pdf does support vectorial graphics, I remember that with processing I was able to parse an svg to a pdf. Maybe there is something similar with js or server side. — Kaiido, Mar 25 '15 at 10:37
apparently even ABCPDF does support svg (http://www.websupergoo.com/helppdfnet/source/3-concepts/h-svgsupport.htm), limitations being scripts, animations and opacity in gradients stop-colors — Kaiido, Mar 25 '15 at 10:49
We are limited to use MSHTML engine and svg is supported only in Gecko Engine in ABCPDF — aleczandru, Mar 25 '15 at 10:52
huh, while reading, I understood they had their own `native SVG import functionality.` from [this page](http://www.websupergoo.com/helppdfnet/?page=source%2F3-concepts%2Fh-svgsupport.htm) `The Gecko engine is a component independent of other parts of the Operating System. It will not be affected even if you upgrade your Internet Explorer or another local Firefox installation.` — Kaiido, Mar 25 '15 at 10:58
Its not releated to firefox instalation its related to how you configure ABCPDF you can configure it to use MSHTML or Gecko we need it to use MSHTML because of some specific features — aleczandru, Mar 25 '15 at 11:00
ok then, I'll post the way I do rasterization, but I don't have IE9 to test it out. — Kaiido, Mar 25 '15 at 11:07

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Even canvg.js is not able to do the rasterization of DOM elements in IE9.
However, it is able to do it from an url, so one solution could be to save the svg in a temporary file onto the server, and then rasterize it back with canvg.
IMHO, a server side solution such as proposed here would be better.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 25 '15 at 11:15

Kaiido

123,334
13
219
285

you solution works fine in chrome but if you open any IE it will not call the onload method for some reason – aleczandru Mar 25 '15 at 11:28
what if you try with `addEventListener` ? As I said, I can't test for IE sorry. Maybe img needs to be appended to the page, could you try it too? – Kaiido Mar 25 '15 at 11:29
I managed to force a call on it using $(img).load() but now it seems to crash on drawImage with an Unspecified error – aleczandru Mar 25 '15 at 11:39
I was able to find the problem with the onload event (ie needs `charset=` ) but still, it does throw a security error… – Kaiido Mar 25 '15 at 19:50

Using toDataUrl on a canvas result in SecurityError in IE

1 Answers1