Internet Explorer canvas.toDataURL SecurityError答案

【问题标题】：Internet Explorer canvas.toDataURL SecurityErrorInternet Explorer canvas.toDataURL SecurityError
【发布时间】：2021-01-20 01:14:52
【问题描述】：

我在 Internet Explorer 上运行以下代码，它会在 var canvasDataUrl = canvas.toDataURL(); 行引发 SecurityError

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';

该错误的原因是什么，我该如何解决？

【问题讨论】：

这通常意味着图像不是clean。这不应该影响不同的浏览器。
您真的要在这个确切的 URL 上加载图像吗？正如之前的评论所说，这不应该在任何浏览器中工作，如果是这样，那就是一个严重的安全错误。如果您尝试绘制其他图像，它是什么类型的图像？也许是 SVG 图像？
我赞成上面的 cmets。我测试了你的代码，它既不能在 IE 也不能在 Chrome 中工作。 SecurityError 表示画布的位图不是原点干净的；至少它的一些内容已经或可能已经从加载文档本身的站点以外的站点加载。我猜你的代码 sn-p 中的图像 src 是虚拟的。如果可以的话，你可以提供真实的图片src，以便我们进行测试。另外，下面的答案在IE下也能很好用，你也可以试试。

标签： javascript internet-explorer canvas todataurl

【解决方案1】：

@pc_coder 的回答是正确的，我想提供一些关于这个错误的信息，你可以看这里https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

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

一旦您在画布中绘制任何从其中加载的数据未经 CORS 批准的另一个来源，画布会被污染。一种受污染的帆布不再被认为是安全的，任何尝试从画布中检索图像数据将导致抛出异常。

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

如果外来内容来自从任一获取的图像 HTMLCanvasElement 或 ImageBitMap，图片来源不符合相同的起源规则，尝试读取画布的内容是被屏蔽了。

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

在画布的上下文中调用 getImageData()

在元素本身上调用 toBlob()

在画布上调用 toDataURL()

在画布被污染时尝试任何这些都会导致抛出 SecurityError。这可以防止用户通过使用图像在未经许可的情况下从远程网站提取信息而暴露私人数据。

【讨论】：

【解决方案2】：

你可以试试crossOrigin

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

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = "anonymous"; 
image.onload = function (event) {
    try {
        canvasContext.drawImage(image, 0, 0, 200, 200);
        console.log(canvas.toDataURL());        
    } catch (e) {
        console.log(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

【讨论】：