Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tai

Js Canvas drawing load remote connection error:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

 

Error Screenshot

Although it is possible to use images in canvas without CORS authorization, doing so will taints the canvas. As long as the canvas is polluted, you can no longer extract data from the canvas, that is, you can no longer call  methods such as toBlob(),  toDataURL() and  getImageData() etc., otherwise a security error will be thrown.

This is actually to protect the user's personal information and avoid the user's image information being loaded from the remote web site without permission, resulting in privacy leakage.

 

Code example:

var canvas = window.document.createElement('canvas');
var ctx = canvas.getContext('2d');

var image = new Image();
image.src = 'xxxx?7c44414156d579012ee2c9845b276e3e';
image.onload = () => {
  canvas.width = 500;
  canvas.height = 500;
  ctx.drawImage(image, 0, 0, 500, 500);
  var imgSrc = canvas.toDataURL('image/png', 1);
  console.log(imgSrc);
}

/* VM1604:10 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at Image.image.onload (<anonymous>:10:23) */

 

 

solution:

1. Allow remote server Access-Control-Allow-Origin to enable cross-domain
2. Image service on the same server