Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.但是没有跨域

这个错误通常出现在跨域请求图片后，尝试将该图片转换为 base64 格式的数据时。但是，即使没有跨域问题，浏览器也会将某些情况下加载的图片视为“污染”的，例如来自于本地文件系统或者使用了 HTTP Basic 认证的图片。在这种情况下，如果你尝试将这些图片转换为 base64 格式，就会遇到“Tainted canvases may not be exported”错误。

解决这个问题的方法有两种：

1. 使用 `crossOrigin` 属性加载图片，这样图片就不会被视为“污染”的。示例代码如下：

var img = new Image();
img.crossOrigin = 'anonymous'; // 通过这个属性设置图片的跨域属性
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0);
  var dataURL = canvas.toDataURL('image/png');
}
img.src = 'https://example.com/image.png';

2. 如果你无法控制图片的跨域属性，可以尝试将图片绘制到 canvas 上时使用 `toBlob()` 方法代替 `toDataURL()` 方法。这样可以避免将图片转换为 base64 格式，从而避免“Tainted canvases may not be exported”错误。示例代码如下：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0);
  canvas.toBlob(function(blob) {
    var fileReader = new FileReader();
    fileReader.onloadend = function() {
      // 使用文件读取器读取 blob 数据
      var dataURL = fileReader.result;
    }
    fileReader.readAsDataURL(blob);
  }, 'image/png');
}
img.src = 'https://example.com/image.png';