Canvas that created from video raising “Tainted canvases may not be exported.” error when saving

不问归期 提交于 2021-02-16 21:00:58

问题


I'm creating snapshot from HTML5 video, using this example. Video is hosted on 3rd party servers, that I can't control.

So I wanted to save image, but toDataURL failing because of security reason.

Here is error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I guess there is a solution for image. img.crossOrigin = "Anonymous" something like that. Here and here.

I tried videoDomElm.crossOrigin = "Anonymous", but no luck.

Is there any solution for video?

Thanks in advance.


回答1:


crossOrigin='anonymous' is only half the solution to passing cross-domain security requirements. It causes the browser to read the response headers and not taint the canvas if the headers allow for cross-origin access of the content.

The other half of the solution is for the server to be configured to send the proper cross-origin permissions in its response headers. Without the server being configured to allow cross-origin access, the canvas will still be tainted.

The only ways to satisfy cross-origin security are:

  1. Have the video originate on the same domain as your web pages.

  2. Have the video server configured to send the appropriate cross-origin access in its headers.

There are no workarounds -- you must satisfy the security restrictions.



来源:https://stackoverflow.com/questions/29571274/canvas-that-created-from-video-raising-tainted-canvases-may-not-be-exported-e

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!