canvas+video实现跨域视频截图

来源：互联网发布：郑州淘宝店运营公司编辑：程序博客网时间：2024/06/07 02:26

利用canvas和video能实现比较酷炫的视频画面同步及视频帧截取(如html5doctor所演示的例子)。

但是在对canvas中的图像进行操作时有跨域限制（canvas安全机制）,如在域名www.a.com的canvas中加载www.b.com/1.jpg的图像，在进行toDataURL或getImageData进行操作时抛出异常。针对跨域图像的操作，目前介绍的比较多，但是对于video+canvas的跨域的比较少，花了不少时间终于解决了。在此非常感谢良少的nginx反向代理跨域。

利用nginx的反向代理可以很好地解决图像和视频的跨域问题。

nginx关键代码:

</pre><p><pre code_snippet_id="1580161" snippet_file_name="blog_20160216_2_948211" name="code" class="plain">  rewrite ^.+video/?(.*)$ /$1;                include uwsgi_params;          proxy_pass http://www.b.com/;            proxy_redirect          off;            proxy_set_header        X-Real-IP $remote_addr;            proxy_set_header        X-Forwarded-For   $remote_addr;            proxy_set_header        X-Forwarded-For   $proxy_add_x_forwarded_for;

注意参数proxy_redirect

0 0