用canvas做视频截图遇到的坑（已填坑）

矫情吗；* 2022-06-05 20:10 557阅读 0赞

最近负责了一个后台功能的扩展，因为没有前端，所以客串了一把前端，需求的内容是做一个视频截图的功能，这期间遇到了canvas 的跨域问题，

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported；  
Failed to load http://static.xxxx.com/mp4/25.mp4: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access；

现在与大家分享一下：

![Center][]

这里会报错，报错内容是：

![Center 1][]

通过查看mdn 发现这里是因为请求的video 与项目不是在一个域名下导致的，canvas 基于安全的考虑不允许这样的操作，具体说名可以看MDN 上的说明：

![Center 2][]

![Center 3][]

这里我们了解了原因，解决这个问题的最终解决方案有两个：1.将文件的位置放在域名下。2.做一个代理配置例如：我是用的是ngnix

加上以下配置

add_header Access-Control-Allow-Origin *;
                    add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
                    add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

这段代码是让服务器允许跨域请求。

注意在使用第二种方案的时候需要添加video 属性：

![Center 4][]

如果没有在添加上面的ngnix 配置，那么再加载文件的时候会报错：

![Center 5][]

最后展示的结果是：

![Center 6][]

最后附上代码：

![Center 7][]

这个问题把我坑惨了，希望大家能看到我的这篇博客，能够避免很多问题，谢谢大家的支持！

[Center]: /images/20220606/3b7507b8ddd246668c299cf07a09e5c0.png
[Center 1]: /images/20220606/7a69e4420ae24adca8cf84717e222d73.png
[Center 2]: /images/20220606/98cf7075fad640fea49e5e52e4832f37.png
[Center 3]: /images/20220606/fbf17875bf8547f8afb2b731ebd00708.png
[Center 4]: /images/20220606/0c93d2740147475cb27d6e323319f1db.png
[Center 5]: /images/20220606/8999c480670c4b1eaaca191963a4e216.png
[Center 6]: /images/20220606/82ebce5e6e014c6295c50da54a21a3b5.png
[Center 7]: /images/20220606/d35f3427f8b14bb7859e2b3e93cead3a.png