Javascript Internet Explorer canvas.toDataURL安全性错误

我在Internet Explorer上运行以下代码，它在var canvasDataUrl=canvas.toDataURL行上抛出一个SecurityError

该错误的原因是什么？我如何解决此问题？

您能试试crossOrigin吗

var canvas=document.createElement'canvas'； var canvasContext=canvas.getContext'2d'； var图像=新图像； image.crossOrigin=匿名； image.onload=函数事件{ 试一试{ canvasContext.drawImageimage，0,0,200,200； console.logcanvas.toDataURL； }抓住e{ console.loge； } };

---

image.src=https://i.chzbgr.com/maxW500/1691290368/h07F7F378/@pc_coder的回答是正确的，我想提供一些有关此错误的信息，您可以在这里看到

因为画布位图中的像素可以来自多种颜色 源，包括从其他主机检索到的图像或视频 安全问题不可避免地会出现

一旦您将从中加载的任何数据绘制到画布中 未经CORS批准，另一个产地的画布被污染。A. 污染的画布不再被认为是安全的，任何 尝试从画布检索回图像数据将导致 要抛出的异常

如果外来内容的来源是HTML或SVG 元素，尝试检索画布的内容不正确 允许

如果外来内容来自从以下两种方式中获得的图像： HTMLCanvasElement或ImageBitMap，且图像源不符合 相同的来源规则，尝试读取画布的内容是 封锁

在受污染的画布上调用以下任何操作都将导致错误：

在画布的上下文中调用getImageData 对元素本身调用toBlob 在画布上调用toDataURL 当画布被污染时尝试这些操作将导致抛出SecurityError。这可以防止用户在未经许可的情况下，通过使用图像从远程网站获取信息而暴露私人数据

---

这通常意味着图像不是。这应该不会影响不同的浏览器。你真的要在这个URL加载图像吗？正如前面的评论所说，这在任何浏览器中都不应该起作用，如果它起作用，那就是一个严重的安全漏洞。如果你想画另一个图像，它是什么样的图像？也许是SVG图像？我赞成上面的评论。我测试了你的代码，它在IE和Chrome中都不能工作。SecurityError表示画布的位图不干净；至少部分内容已经或可能已经从加载文档本身的站点以外的站点加载。我猜代码片段中的图像src是虚拟的。如果可能，您可以提供真实的图像src，以便我们可以进行测试。此外，下面的答案在IE中也可以很好地使用，你也可以试试。

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  canvasContext.drawImage(img,0,0);
  var canvasDataUrl = canvas.toDataURL(); // error occurs here
  console.log(canvasDataUrl);
};
img.src = 'https://via.placeholder.com/300x300';

var img = new Image();
img.crossOrigin = "anonymous";