1 本地视频截屏（canvsa）
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title></title> ???<link rel="stylesheet" href=""> ???<style type="text/css"> ???????.screen_shot_btn,.screen_save_btn{display: inline-block;width: 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;} ???????.btn-wrap{margin:15px 0;} ???????.img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;} ???????#image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;} ???</style></head><body> ???????<div class="btn-wrap"> ???????????<a id="screen_shot_btn" ?class="screen_shot_btn" href="javascript:">截图</a> ???????????<a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a> ???????</div> ???????<div class="video_wrap"> ???????????<video id="video_el" autoplay width="720" height="450"><source src="images/sp.mp4" /></video> ???????</div> ???????<div class="img_show_wrap"> ???????????<canvas width="720" height="450" id="V2I_canvas" ></canvas> ???????????<img id="image_el" src="" > ???????</div> ???????<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> ???????<script type="text/javascript" src="js/flv.js"></script> ???????<script type="text/javascript"> ???????????$(function() { ???????????????var mySrc = ""; ???????????????function htmlToImage() { ???????????????????var canvas = document.getElementById("V2I_canvas"); ???????????????????if (!canvas.getContext) { ???????????????????????alert("您的浏览器暂不支持canvas"); ???????????????????????return false; ???????????????????} else { ???????????????????????var context = canvas.getContext("2d"); ???????????????????????var video = document.getElementById("video_el"); ???????????????????????context.drawImage(video, 0, 0, canvas.width, canvas.height); ???????????????????????return mySrc = canvas.toDataURL("image/png"); ???????????????????} ???????????????} ???????????????$("#screen_shot_btn").click(function(event) { ???????????????????htmlToImage(); ???????????????????$("#image_el").attr("src", mySrc); ???????????????}); ???????????????$("#screen_save_btn").click(function() { ???????????????????htmlToImage(); ???????????????????if ($("#image_el").attr("src") != "") { ???????????????????????downloadFile(mySrc); ???????????????????} else { ???????????????????????alert("内容为空"); ???????????????????} ???????????????}) ???????????????function downloadFile(src) { ???????????????????var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png"); ???????????????} ???????????}) ???????</script></body></html>
2跨域视频截屏
note: 在video 标签内 添加 crossorigin="*" 即可
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title></title> ???<link rel="stylesheet" href=""> ???<style type="text/css"> ???????.screen_shot_btn,.screen_save_btn{display: inline-block;width: 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;} ???????.btn-wrap{margin:15px 0;} ???????.img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;} ???????#image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;} ???</style></head><body> ???????<div class="btn-wrap"> ???????????<a id="screen_shot_btn" ?class="screen_shot_btn" href="javascript:">截图</a> ???????????<a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a> ???????</div> ???????<div class="video_wrap"> ???????????<video id="video_el" crossorigin="*" ?autoplay width="720" height="450"><source src="http://jq22com.qiniudn.com/jq22-sp.mp4" /></video> ???????</div> ???????<div class="img_show_wrap"> ???????????<canvas width="720" height="450" id="V2I_canvas" ></canvas> ???????????<img id="image_el" src="" > ???????</div> ???????<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> ???????<script type="text/javascript" src="js/flv.js"></script> ???????<script type="text/javascript"> ???????????$(function() { ???????????????var mySrc = ""; ???????????????function htmlToImage() { ???????????????????var canvas = document.getElementById("V2I_canvas"); ???????????????????if (!canvas.getContext) { ???????????????????????alert("您的浏览器暂不支持canvas"); ???????????????????????return false; ???????????????????} else { ???????????????????????var context = canvas.getContext("2d"); ???????????????????????var video = document.getElementById("video_el"); ???????????????????????context.drawImage(video, 0, 0, canvas.width, canvas.height); ???????????????????????return mySrc = canvas.toDataURL("image/png"); ???????????????????} ???????????????} ???????????????$("#screen_shot_btn").click(function(event) { ???????????????????htmlToImage(); ???????????????????$("#image_el").attr("src", mySrc); ???????????????}); ???????????????$("#screen_save_btn").click(function() { ???????????????????htmlToImage(); ???????????????????if ($("#image_el").attr("src") != "") { ???????????????????????downloadFile(mySrc); ???????????????????} else { ???????????????????????alert("内容为空"); ???????????????????} ???????????????}) ???????????????function downloadFile(src) { ???????????????????var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png"); ???????????????} ???????????}) ???????</script></body></html>
3 flv.js 实现 视频流截屏
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title></title> ???<link rel="stylesheet" href=""> ???<style type="text/css"> ???????.screen_shot_btn,.screen_save_btn{display: inline-block;width: 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;} ???????.btn-wrap{margin:15px 0;} ???????.img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;} ???????#image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;} ???</style></head><body> ???????<div class="btn-wrap"> ???????????<a id="screen_shot_btn" ?class="screen_shot_btn" href="javascript:">截图</a> ???????????<a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a> ???????</div> ???????<div class="video_wrap"> ???????????<video id="video_el" ?crossorigin="*" width="720" height="450"></video> ???????</div> ???????<div class="img_show_wrap"> ???????????<canvas width="720" height="450" id="V2I_canvas" ></canvas> ???????????<img id="image_el" src="" > ???????</div> ???????<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> ???????<script type="text/javascript" src="js/flv.js"></script> ???????<script type="text/javascript"> ???????????$(function() { ???????????????if (flvjs.isSupported()) { ???????????????????var videoElement = document.getElementById(‘video_el‘); ???????????????????var flvPlayer = flvjs.createPlayer({ ???????????????????????type: ‘flv‘, ???????????????????????url: ‘http://192.168.30.218:8100/movie1‘ ???????????????????}); ???????????????????flvPlayer.attachMediaElement(video_el); ???????????????????flvPlayer.load(); ???????????????????flvPlayer.play(); ???????????????} ???????????????var mySrc = ""; ???????????????function htmlToImage() { ???????????????????var canvas = document.getElementById("V2I_canvas"); ???????????????????if (!canvas.getContext) { ???????????????????????alert("您的浏览器暂不支持canvas"); ???????????????????????return false; ???????????????????} else { ???????????????????????var context = canvas.getContext("2d"); ???????????????????????var video = document.getElementById("video_el"); ???????????????????????context.drawImage(video, 0, 0, canvas.width, canvas.height); ???????????????????????return mySrc = canvas.toDataURL("image/png"); ???????????????????} ???????????????} ???????????????$("#screen_shot_btn").click(function(event) { ???????????????????htmlToImage(); ???????????????????$("#image_el").attr("src", mySrc); ???????????????}); ???????????????$("#screen_save_btn").click(function() { ???????????????????htmlToImage(); ???????????????????if ($("#image_el").attr("src") != "") { ???????????????????????downloadFile(mySrc); ???????????????????} else { ???????????????????????alert("内容为空"); ???????????????????} ???????????????}) ???????????????function downloadFile(src) { ???????????????????var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png"); ???????????????} ???????????}) ???????</script></body></html>
总结：
1、 context.drawImage(image, 0, 0, canvas.width, canvas.height);
此处的 context.drawImage 的方法 video 应该为 image绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource)，例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。
传送门：CanvasRenderingContext2D.drawImage() 。
note: 因此 视频流截屏时不能用 video.js ，因为video.js 本质是用的flash ,把video标签处理了.
2、出现跨域 不能用canvas.toDataURL（）
解决办法：1、把视频资源放入目录中
2，或者在 视频标签中添加 crossorigin="*"
3、 flv.js兼容性不大好，目前只测兼容pc 端火狐，谷歌；移动端不支持。下载的 download 属性兼容性 也不乐观，后续找到解决方案再补上。
js 利用canvas + flv.js实现 视频流 截屏 、本地下载功能实现，兼容火狐，谷歌， 截屏跨域的坑
原文地址：https://www.cnblogs.com/xiaomaotao/p/9225589.html