Javascript svg到png图像的浏览器内转换（跨浏览器，包括IE）

我正在使用Highcharts，我需要将页面上的所有图表转换为图像，然后发送到服务器，以便将其合并到已包含一些表和透视网格的主导出excel。 这是到目前为止我的代码

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'
});

你可以在这里找到完整的代码

在Firefox和Chrome中生成的图像似乎很好，但在IE中没有（这里我只得到一个黑色图像）。我使用的画布是我收集的IE支持的

---

如果您能帮我找出我做错了什么，或者您能指出一个更好的解决方案，我将不胜感激。

IE9似乎确实支持canvas元素

以下toDataURL的示例/测试代码在IE11中适用于我：

你给的小提琴在IE11中不起作用；查看控制台错误，会导致在图像完成渲染之前无法调用drawImage。我扔了一个球

调用不支持的方法或方法的属性

添加setTimeout允许IE渲染动态图像并绕过此错误

但这会导致一场灾难

Security Error

因为IE似乎因为一些“跨来源”的问题而污染了画布

出于安全原因，IE似乎正在污染所有填充SVG的图像-

我设法使用

canvg

创建了一个工作版本，它将SVG文件转换为画布指令-

解决办法归结为

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

---

检查一下这个在IE11中有效的小提琴

我试着只保留来自ajax的调用，但仍然一样，你给我的链接在我的IE9中也有效，所以我想我会尝试查看那里的代码，看看我做了什么不同，谢谢，我会告诉你我添加了一个建议的解决方案。我认为没有简单的解决方案，因为IE处理SVG和跨源策略的方式。如果canvg支持您的svg元素集，我认为它对您的问题有用。非常感谢，这很有效。我得出的结论是IE9不支持svg类型的图像源（即：数据：image/svg+xml）

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.

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