In browser conversion of svg to png image (cross browser including IE)

Question

I am using Highcharts and i need to convert all the charts on the page to an image that i can send to my server so i can merge it to a master export excel which already contains some tables and pivot grids. This is my code so far

var svg = Highcharts.getSVG(charts);
img = new Image();
img.src = "data:image/svg+xml," + encodeURIComponent(svg);
mycanvas = document.createElement('canvas');
mycanvas.width = 1000
mycanvas.height = 1000
ctx = mycanvas.getContext("2d");
ctx.drawImage(img, 0, 0);
$("body").append("<image src='" + mycanvas.toDataURL("image/png") + "'/>");
$.ajax({
    type: "POST",
    url: '@Url.Action("getfile")',
    data: JSON.stringify({ file: mycanvas.toDataURL("image/png").replace("data:image/png;base64,", "") }),
    contentType: 'application/json; charset=utf-8'
});

This is the c# code where i tested if i get the data correctly from the client(i just write the base64 string to a file). Firefox and Chrome write the image correctly, IE just give me a black image

public void getfile(string file)
{
    System.IO.File.WriteAllBytes(@"c:\yourfile.png", Convert.FromBase64String(file));
}

the entire code you can find here http://jsfiddle.net/gd7bB/2291/

The image seems to be generated fine in Firefox and Chrome, but not IE(here i just get a black image). I am using a canvas which from what i gathered IE supports IE9 Support for HTML5 Canvas tag.

If you could help me figure out what i'm doing wrong, or maybe you can point the way of a better solution i would much appreciate it.

score 3 · Accepted Answer · edited May 23 '17 at 12:18

IE9 seem to indeed support the canvas element as per https://msdn.microsoft.com/fr-fr/library/ff975241(v=vs.85).aspx

The following sample/test code for toDataURL works for me in IE11 : http://samples.msdn.microsoft.com/Workshop/samples/canvas/todataurl.html

The fiddle you gave does not work in IE11 ; looking at the console errors, it leads to the fact that you cannot call drawImage before the image has finished its rendering. IE Throws a

call to unsupported method or attributes of a method

Adding a setTimeout allow IE to render the dynamic image and bypass this error.

But it then leads to a

Security Error

because it seems that IE has tainted the canvas because of some "cross origin" issue

SecurityError
The img or video element is not of the same origin or domain
as the document that owns the canvas element. Versions earlier
than Internet Explorer 10 use SECURITY_ERR.

IE seems to be tainting all images filled with SVG for security reasons - SVG tained canvas IE security error toDataURL

I managed to have a working version using canvg, which transforms an SVG file into canvas instructions - https://github.com/gabelerner/canvg

the solution boils down to

var svg = Highcharts.getSVG(charts);
var mycanvas = document.createElement('canvas');
canvg(mycanvas, svg)
console.log(mycanvas.toDataURL("image/png"))

check this fiddle http://jsfiddle.net/6bxqbaeb/1/ which works in IE11

i tried leaving only the call from the ajax, but still the same, the link you gave me also works in my IE9, so i guess i'll try to look at code there see what i did different, thanks, i'll let you know — Liviu Boboia, Oct 28 '15 at 14:02
I added a proposed solution. I think there is no easy solution because of the way IE handles SVG and cross origin policies. If canvg supports your set of svg elements, it will I think work for you problem — Jerome WAGNER, Oct 28 '15 at 14:57
Thank you very much, this works. The conclusion i came to is that IE9 does not support image sources of type svg (ie: data:image/svg+xml) — Liviu Boboia, Oct 29 '15 at 11:48

In browser conversion of svg to png image (cross browser including IE)

1 Answers1