Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. at img.onload

“被污染”的canvas是指在使用跨域图片时，未启用CORS或未正确设置CORS响应头的情况下，在画布上绘制了该图片。这会导致画布被污染，进而导致无法读取画布的数据，包括无法使用toBlob()、toDataURL()或getImageData()等方法，调用这些方法会抛出安全错误。

在你提供的错误信息中，'Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.'表示在canvas上绘制了被污染的图片，导致无法导出canvas的数据。

相关问题

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这个错误通常是由于跨域资源的安全策略导致的。当在画布上绘制了来自不同域的图像或视频时，画布就会变得“污染”，从而无法使用 toBlob 方法进行导出。

解决办法之一是确保你在绘制图像或视频之前，将其标记为可允许跨域。可以通过设置图像或视频元素的 `crossOrigin` 属性为 "anonymous" 来实现这一点。

例如，如果你有一个图像元素，可以像这样设置它的 `crossOrigin` 属性：

const img = document.createElement('img');
img.crossOrigin = "anonymous";
img.src = "https://example.com/image.jpg";

这样做后，画布就不会被标记为“污染”，你应该能够成功地使用 `toBlob` 方法导出画布了。

请注意，这个解决办法只适用于你有控制或能够更改图像或视频资源的情况。如果资源来自外部网站且未设置允许跨域访问，那么你将无法解决这个问题。

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.]

这个错误通常发生在尝试导出包含来自其他域的图像的画布时。浏览器会阻止导出涉及到跨域图像的画布，以防止可能的安全风险。

为了解决这个问题，你可以尝试以下方法之一：

1. 使用相同域的图像：确保画布中使用的图像与页面位于相同的域。这样就不会涉及到跨域问题。

2. 通过跨域资源共享 (CORS) 解决：如果你无法更改图像来使其与页面位于相同的域，你可以在服务器上配置 CORS 头部。这将允许浏览器跨域加载图像并导出画布。

3. 将图像转换为 base64 数据：你可以将图像转换为 base64 数据，并直接在画布上使用该数据。这样就不会涉及到跨域问题，因为图像数据已经包含在页面中。

希望这些方法可以帮助你解决问题！如果还有其他疑问，请随时提问。