Convert svg to png image in a browser (cross browser including IE)

Question

I use Highcharts, and I need to convert all the diagrams on the page to an image that I can send to my server so that I can combine it with the main 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 C # code where I tested if I get the data from the client correctly (I just write the base64 string to the file). Firefox and Chrome correctly capture the image, IE just gives me a black image

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

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

Firefox Chrome, IE ( ). , , IE, IE9 Canvas HTML5.

, , , , , .

Answer 1

IE9, , canvas https://msdn.microsoft.com/fr-fr/library/ff975241(v=vs.85).aspx

/ toDataURL IE11: http://samples.msdn.microsoft.com/Workshop/samples/canvas/todataurl.html

, , IE11; , , drawImage , . IE

setTimeout IE .

a

Security Error

, IE - " "

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, -, , SVG, - SVG IE IE3.

canvg, SVG - https://github.com/gabelerner/canvg

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

http://jsfiddle.net/6bxqbaeb/1/, IE11