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

Question

首先,我知道toDataURL当源图像来自另一个源时访问canvas的方法是一个安全问题.

但在我的情况下,我使用data:url作为我的源,img然后使用img并绘制它canvas,然后调用canvas.toDataUrl.

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

任何的想法？

...
var svgxml = getxmlsvg();
img.onload = function(){
    canvas.drawImage(this, 0, 0);
    canvas.toDataURL("image/png"); // <--- security error
}
image.src = URL.createObjectURL(new Blob([svgxml], {type: "image/svg+xml;charset=utf-8" }))

以下是svgopen.org的引用

将数据从SVG传输到Canvas存在安全问题,这会导致Canvas变为只写.我们认为使用我们的SVG.toDataURL()提案("建议"部分)可以避免这些问题.

同源和画布原产地政策

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

Canvas具有强大的图像读写功能.使用canvas作为中间人将局部图像传输到第三方只需将图像从文件:// -URL加载到Canvas元素,然后将像素数据从Canvas元素发送到任何带有JavaScript的主机,这将是微不足道的.

为防止使用Canvas泄漏信息,当图像数据源不安全时,浏览器会小心保护Canvas的使用.创建所有Canvas元素时,其origin-clean属性设置为true.当可能用于使用Canvas元素传输违反相同原始策略的内容的任何操作时,origin-clean属性将永久设置为false.

如果返回存储在画布中的像素数据的方法(例如toDataURL()或getImageData())在其origin-clean为false的Canvas元素上调用,则会引发DOMException 18 SECURITY_ERR [Canvas10].

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

Answer 1

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

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