用canvas做視頻截圖遇到的坑（已填坑）

最近負責了一個後臺功能的擴展，因爲沒有前端，所以客串了一把前端，需求的內容是做一個視頻截圖的功能，這期間遇到了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；

現在與大家分享一下：

這裏會報錯，報錯內容是：

通過查看mdn 發現這裏是因爲請求的video 與項目不是在一個域名下導致的，canvas 基於安全的考慮不允許這樣的操作，具體說名可以看MDN 上的說明：

這裏我們瞭解了原因，解決這個問題的最終解決方案有兩個：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 屬性：

如果沒有在添加上面的ngnix 配置，那麼再加載文件的時候會報錯：

最後展示的結果是：

最後附上代碼：

這個問題把我坑慘了，希望大家能看到我的這篇博客，能夠避免很多問題，謝謝大家的支持！