使用 CSS background-image 时可能无法导出受污染的画布答案

【问题标题】：Tainted canvases may not be exported when using CSS background-image使用 CSS background-image 时可能无法导出受污染的画布
【发布时间】：2017-01-07 15:56:00
【问题描述】：

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

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

尝试在返回的画布上调用 toDataUrl() 时。

图像的Access-Control-Allow-Origin 标头设置为*，所以我觉得它应该工作，但错误当然不会给我太多继续。

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

【问题讨论】：

测试你的图片是否真的通过了CORS：当你直接在一个空的画布上（而不是作为背景）绘制图片时，你可以使用toDataURL吗？另外，您是否将 html2canvas 的 useCORS 设置为 true？如果问题仍然存在，可能 html2canvas 不检查背景图像，您可能需要在 div 下放置一个 img 而不是使用背景图像。

标签： javascript css canvas cross-domain html2canvas

【解决方案1】：

不知道这是否仍然是一个问题，但我遇到了与 CSS background-image 相同的问题，它产生了同样的错误。

用html2canvas option useCORS: true 修复它。除此之外，为选项allowTaint 设置默认值也很重要，即false

【讨论】：