在瀏覽器中將svg轉換為png圖像（包括IE在內的跨瀏覽器）

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支持HTML5 Canvas標簽 。

如果你能幫助我弄清楚我做錯了什么，或者你可以指出更好的解決方案，我會非常感激。

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呈現動態圖像並繞過此錯誤。

但它導致了一個

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安全性錯誤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/