如何在Internet Explorer中将svg转换为png图像？ [英] how to convert svg to png image in internet Explorer?

问题描述

我有一张用高图创建的图表。
我需要在Internet Explorer中将svg保存到png。
i在后续代码中使用并存在安全性在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'）; 
}）
  

解决方案

没有找到一个令人满意的复制目标，所以我会将其重写为一个答案：

---

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

这个操作对浏览器来说是敏感的，因为svg图像意味着解析一些XML，并且它可以包含一些棘手的元素< sub>（尽管IE不支持< foreignObject> ...）

所以很多时候，浏览器会增加安全限制当SVG图像被绘制到它时，将阻止所有导出方法。

在safari> 9的情况下，当绘制< foreignObject> 时，情况也是如此在chrome中的情况，但只有当图像来自Blob _{（an 执行错误，但他们最终完全利用了安全限制）。}

然后在IE< Edge，带有任何SVG。

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

这些都是可行的，但可能需要一些时间才能实现，所以即使我不太喜欢它，您最好使用像<一个href =https://github.com/canvg/canvg =nofollow noreferrer> canvg ，它完全做到了这一点（解析+使用canvas方法渲染）。

i have a chart that created with highchart. i need to save svg to png in internet Explorer. i use from follow code and exist security Error in 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');
})

解决方案

I didn't found an satisfying dupe target, so I'll rewrite it as an answer :

---

Drawing an SVG image through drawImage method will taint the canvas in IE < Edge for security reasons.

This operation is somehow sensitive for browsers, since svg images imply to parse some XML, and that it can contain some tricky elements _{(though IE doesn't support <foreignObject>...)}
So quite often, browsers will add security restrictions when SVG images are drawn to it, and will block all exporting methods.

This is the case in safari > 9 when an <foreignObject> is drawn on it, this was also the case in chrome, but only when the image comes from an Blob _{(an implementation bug, but they finally leveraged the security restriction altogether anyway).}
And then in IE < Edge, with any SVG.

The only way to workaround this issue is to parse yourself the SVG, and then use the canvas' methods to reproduce it.

This is all doable, but can take some time to implement, so even though I don't really like it, you'd probably be better using an library like canvg, which does exactly this (parsing + rendering with canvas methods).

这篇关于如何在Internet Explorer中将svg转换为png图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！