Internet Explorer canvas.toDataURL 安全错误

Question

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

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

Answer 1

你能试试吗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/"

Answer 2

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

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML or SVG element, attempting to retrieve the contents of the canvas isn't allowed.

If the foreign content comes from an image obtained from either as HTMLCanvasElement or ImageBitMap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

Calling any of the following on a tainted canvas will result in an error:

Calling getImageData() on the canvas's context

Calling toBlob() on the element itself

Calling toDataURL() on the canvas

Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Internet Explorer canvas.toDataURL 安全错误

Internet Explorer canvas.toDataURL SecurityError

javascript

internet-explorer

canvas

todataurl