js 利用canvas + flv.js實現 視頻流 截屏 、本地下載功能實現，兼容火狐，谷歌， 截屏跨域的坑
阿新 • • 發佈：2018-06-25
font 方案 function can 屬性和方法 load() com DG ren
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="*"
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實現 視頻流 截屏 、本地下載功能實現，兼容火狐，谷歌， 截屏跨域的坑