如何在 Internet Explorer 中将 svg 转换为 png 图像？

Question

我有一个用 highchart 创建的图表。 我需要在 Internet Explorer 中将 svg 保存为 png。 我使用以下代码并在 ie11 中存在安全错误。

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

Answer 1

我没有找到令人满意的欺骗目标，所以我将其重写为答案：

---

出于安全原因，通过drawImage方法绘制 SVG 图像将污染 IE < Edge 中的画布。

这个操作对浏览器来说有点敏感，因为 svg 图像意味着解析一些 XML，并且它可以包含一些棘手的元素_{（尽管 IE 不支持<foreignObject> ...）}
所以很多时候，浏览器会在绘制 SVG 图像时添加安全限制，并会阻止所有导出方法。

这是在 safari > 9 中绘制<foreignObject>时的情况，在 chrome 中也是这种情况，但仅当图像来自 Blob 时_{（一个实现错误，但他们最终还是完全利用了安全限制） .}
然后在 IE < Edge 中，使用任何 SVG。

解决此问题的唯一方法是自己解析 SVG，然后使用画布的方法来重现它。

这都是可行的，但可能需要一些时间来实现，所以即使我真的不喜欢它，你可能会更好地使用像canvg这样的库，它正是这样做的（使用画布方法解析 + 渲染）。