对于普通网页,截屏的实现并不难,网上也有成熟的插件,使用最多的应该是html2canvas,自己也试了下,能达到效果,我以为这部分的工作就这么简单交差了
然而我们的网页并不普通,网页中还嵌入了视频,而且不是同源的,导致截出来的图片视频区域是空白
网上继续查资料,才发现是跨域问题
继续查找能不能解决跨域问题,html2canvas是有配置,然而其针对的是服务端允许跨域的情况,意思是说服务端不允许跨域,设置了也没效果,而我们网页的视频源也没办法设置
很绝望,继续查找资料
大概了解到网页截屏不管什么插件,基本使用canvas和svg实现,而且都会出现跨域资源无法加载的问题
参考以下一篇文章
https://juejin.im/entry/58b91491570c35006c4f7fdf
看了基于dom转化对应我们项目是行不通的,于是继续寻找别的方案
研究过phantomjs,然而其实际是个无界面浏览器,我们的网站需要登录,它不能截取我们登录后的网页
网上看下有没有可用的Chrome插件,结果看了几个都需要额外的操作
有个牛牛截图可以,但需要额外安装客户端
然而领导明确需求:
1.无感知截图,即点击一个按钮,默认截图,不需要额外的操作
2.不需要额外安装客户端等插件
跟领导反应,不使用插件没办法完成,像webqq等都是通过插件实现的,
前端不行,那转向后端
后端一位同学表示通过ffmpeg可以截取rtsp视频流的图片
于是我们的方案是把html2canvas截的图和ffmpeg合成一张完整的图
到此告一段落