Question

我正在使用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'
});

这是我测试的c＃代码，如果我从客户端正确获取数据（我只是将base64字符串写入文件）。 Firefox和Chrome正确写入图像，IE只给我一个黑色图像

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

您可以在此处找到完整的代码 http://jsfiddle.net/gd7bB/2291/

图像似乎在Firefox和Chrome中生成，但不是IE（这里我只是得到一个黑色图像）。我使用的画布从我收集的IE支持IE9 Support for HTML5 Canvas tag。

如果你能帮我弄清楚我做错了什么，或者你可以指出更好的解决方案，我会非常感激。

Answer 1

根据https://msdn.microsoft.com/fr-fr/library/ff975241(v=vs.85).aspx

，IE9似乎确实支持canvas元素

以下的toDataURL示例/测试代码适用于IE11：http://samples.msdn.microsoft.com/Workshop/samples/canvas/todataurl.html

你给的小提琴在IE11中不起作用;查看控制台错误，导致您无法在图像完成渲染之前调用drawImage。 IE投掷

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

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

然后它会导致

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 tained canvas IE security error toDataURL

我设法使用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"))

检查这个在IE11中有效的小提琴http://jsfiddle.net/6bxqbaeb/1/

在浏览器中将svg转换为png图像（包括IE在内的跨浏览器）

1 个答案: