如何在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图像？

回答

相关问题