javascript - 从视频创建的 Canvas 在保存时出现 "Tainted canvases may not be exported."错误

Question

我正在使用 this example 从 HTML5 视频创建快照。视频托管在第三方服务器上，我无法控制。

所以我想保存图像，但由于安全原因 toDataURL 失败。

这里出现错误:无法在“HTMLCanvasElement”上执行“toDataURL”:受污染的 Canvas 可能无法导出。

我想图像有一个解决方案。 img.crossOrigin = "Anonymous" 类似的东西。 Here和 here .

我尝试了videoDomElm.crossOrigin = "Anonymous"，但没有成功。

视频有什么解决方案吗？

提前致谢。

Answer 1

crossOrigin='anonymous' 只是通过跨域安全要求的解决方案的一半。如果 header 允许内容的跨域访问，它会导致浏览器读取响应 header 并且不会污染 Canvas 。

解决方案的另一半是将服务器配置为在其响应 header 中发送适当的跨域权限。如果服务器没有配置为允许跨源访问， Canvas 仍然会受到污染。

满足跨域安全性的唯一方法是:

1. 让视频与您的网页源自同一域。

2. 将视频服务器配置为在其 header 中发送适当的跨源访问。

没有解决方法 - 您必须满足安全限制。