如何将SVG转换为Internet Explorer中的PNG图像

Question

我有一个用HighChart创建的图表。我需要将SVG保存到Internet Explorer中的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＆lt中污染画布。出于安全原因，边缘。

此操作对浏览器很敏感，因为SVG图像意味着解析一些XML，并且它可以包含一些棘手的元素(尽管IE不支持<foreignObject> ...(

因此，当绘制SVG图像时，浏览器会添加安全限制，并会阻止所有导出方法。

在Safari> 9中是这种情况，当在上面绘制<foreignObject>时，在Chrome中也是如此，但是只有当图像来自Blob (实现错误，但它们最终利用安全性(无论如何，完全限制(。
然后在IE＆LT中边缘，任何SVG。

解决这个问题的唯一方法是解析自己的SVG，然后使用画布的方法来复制它。

这都是可行的，但是可能需要一些时间才能实现，因此，即使我真的不喜欢它，您也可能会使用像Canvg这样的库，这可以做到这一点(使用canvas方法解析 渲染(。