Question

首先，我知道当源图像来自另一个来源时访问画布的toDataURL方法是一个安全问题。

但在我的情况下，我使用data:网址作为img的来源，然后使用img并在canvas上绘制，然后调用{{1 }}

这在Chrome和Firefox上运行正常，但在IE中出现安全错误而失败！

任何想法？

canvas.toDataUrl

以下是svgopen.org

的引用

将数据从SVG传输到Canvas存在安全问题，这会导致问题   Canvas变为只写。我们认为这些问题可能存在   避免使用我们的SVG.toDataURL（）提案（“建议”部分）。

同源和画布原产地政策

网页由来自不同的不同元素组成   起源。来自相同来源的元素被认为是   安全[Origin10]。

Canvas具有强大的图像读写功能。它会   使用canvas作为中间人来传输本地图像是微不足道的   第三方只是将文件从file：//加载到Canvas元素中   -URL然后使用JavaScript将Canvas元素的像素数据发送到任何主机。

为了防止Canvas信息泄露，浏览器都是谨慎的   当图像数据的源不是时，保护Canvas的使用   安全。所有Canvas元素都创建为origin-clean属性   设为true。何时可能使用的任何操作   使用Canvas元素传输违反相同来源的内容   策略，origin-clean属性永久设置为false。

如果方法返回存储在画布中的像素数据，例如   toDataURL（）或getImageData（）在Canvas元素上调用   origin-clean是false，然后引发DOMException 18 SECURITY_ERR   [Canvas10]。

但我正在浏览器中动态创建SVG。

Answer 1

就我而言，我将组成图像的图形元素从svg更改为png。当使用svg时，我在IE 11（和10）中看到安全性错误，而不是Chrome，当我使用toDataURL时。使用png元素构建图形，没问题。

第二个问题是svgs没有在IE 11中正确调整大小，因此反对在IE中使用svgs的另一个问题。

Answer 2

存在一个抽象svg的库 - ＆gt;画布 - ＆gt; png并为SVG元素添加一个方法，以便在任何浏览器中只需使用回调和“canvg”选项调用mySvg.toDataUrl（）：

https://github.com/sampumon/SVG.toDataURL

此实现考虑了安全性异常，因此您可以通过遇到的权限错误。

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
<script>
<script type="text/javascript" src="http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js"></script>

mySVGelement.toDataURL("image/png", {
  renderer: "canvg"
  callback: function(data) {
      image.src = data;
  }
});
</script>

<强>兼容性：

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         -
Chrome       +        +          33+ ²
Safari       +        +          -
Firefox      +        +          11+ ¹
Opera        +        +          -

IE在画布上调用toDataUrl时抛出安全错误

2 个答案: