如何在Internet Explorer中將svg轉換爲png圖像？

我有一張使用高圖創建的圖表。我需要在Internet Explorer中將svg保存到png。我使用從後續代碼和ie11中存在安全性錯誤。如何在Internet Explorer中將svg轉換爲png圖像？

var canvas = document.createElement('canvas'); 
canvas.width = width; 
canvas.height = height; 
var ctx = canvas.getContext('2d'); 
var imgChart = document.createElement('img'); 
imgChart.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))); 
imgChart.onload = function() { 
    ctx.drawImage(imgChart, 0, 0); 
    var blobObject = canvas.msToBlob(); 
    window.navigator.msSaveBlob(blobObject, 'save.png'); 
})

來源

2017-05-28 mrmr68

那麼有什麼不工作？你是什麼意思'和存在安全錯誤'？ –

ctx.drawImage（imgChart，0，0）;不工作在ie – mrmr68

那麼它應該：它支持自IE9以來：https://msdn.microsoft.com/en-us/library/ff975414(v=vs.85).aspx –

我沒有找到一個滿意的重複數據刪除技術的目標，所以我會重寫它作爲一個答案：

通過繪製方法drawImage SVG圖像會玷污在IE畫布<出於安全原因的邊緣。

這個操作是瀏覽器莫名其妙地敏感，因爲SVG圖像暗示解析一些XML，並且它可以包含一些棘手的元素_{（雖然IE不支持<foreignObject> ...）}
所以很多時候，瀏覽器將在SVG圖像被繪製時添加安全限制，並會阻止所有導出方法。

這是Safari瀏覽器的情況下> 9時<foreignObject>上它繪製的，這也是在鉻的情況，但只有當圖像來自一個斑點_{（一implementation bug，但他們最後乾脆利用的安全限制無論如何）。}
然後在IE < Edge中，用任何SVG。

解決此問題的唯一方法是解析自己的SVG，然後使用the canvas' methods來重現它。

這都是可行的，但可能需要一些時間來實現，所以即使我不太喜歡它，你可能會更好地使用像canvg這樣的庫，它正是這樣做的（解析+使用canvas進行渲染方法）。

來源

2017-05-28 10:40:20 Kaiido

可以在angular4項目中使用Canvg嗎？ – anand

@anand dunno ......但我不明白爲什麼不。 – Kaiido

面臨難以安裝canvg包 – anand

如何在Internet Explorer中將svg轉換爲png圖像？

回答

相關問題