javascript - 使用 CSS 背景图像时，可能无法导出受污染的 Canvas

Question

我正在使用 html2canvas 从一组 HTML 元素生成图像。但是，其中一个元素具有 background-image 属性，其中包含从不同来源加载的图像。这导致 Canvas 在生成时受到污染，导致我的图像生成失败并出现以下错误

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

当尝试在返回的 Canvas 上调用 toDataUrl() 时。

图像的 Access-Control-Allow-Origin header 设置为 * 所以我觉得它应该可以工作但是错误是当然不会让我继续下去。

关于使用 image.crossOrigin = 'anonymous' 将来自不同来源的图像加载到 Canvas 中有很多问题，但没有人提到使用 CSS 作为背景图像加载图像，所以我想知道如何处理这个？

Answer 1

不知道这是否仍然是个问题，但我在 CSS background-image 上遇到了同样的问题，导致了同样的错误。

用 html2canvas option 修复了它使用 CORS:真。除此之外，allowTaint 选项的默认值为 false

也很重要