问题:
公司业务需要,做一个html页面截图的功能,准备使用canvas 绘制video标签中的画面并转成base64传到后台保存,总是会出现
ScreenShot.js:39 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
解决:
项目中使用的是video.js 进行视频播放,该插件最终使用的是html5的video标签进行视频的播放,视频所在的服务器和当前web应用程序所在的服务器不再一起,在使用canvas绘制图片的时候已经将画布污染了,在调用canvas.toDataUrl()方法的时候会报错
具体的原因可以参照下这个文章
一旦画布被污染则以下方法都会报错:
- Calling getImageData() on the canvas's context
- Calling toBlob() on the canvas element itself
- Calling toDataURL() on the canvas
video标签中的视频是跨域的,所以在video标签中添加属性 crossorigin="anonymous" 在添加之后对应的视频服务器也需要添加响应头以允许跨域:
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:*
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: *
上面是在视频服务器中的配置,对应的如果是img之类的标签需要引入静态资源的,对应的资源服务器在请求头中都需要设置,这里的* 代表的是允许所有.根据具体的需求进行配置.
该解决方案不怎么好,如果多个视频服务器则每个服务器都需要配置,并且带来一些安全隐患.如果有更好的方案,希望大牛指导下.
