从视频中创建的画布“可能无法导出受污染的画布”。保存时出错

Question

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

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

这里是错误：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

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

有视频解决方案吗？

提前致谢。

Answer 1

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

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

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

1. 让视频来自与您的网页相同的域。

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

没有变通办法——您必须满足安全限制。