完整代碼:
<!doctype html>
<html lang="zh-CN">
<head>
<title>測試頁</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<body>
<video id="video" controls="controls">
<source src="movie.ogg"></source>
<source src="movie.mp4"></source>
您的瀏覽器不支持html5
</video>
<button id="capture">截屏</button>
<div id="output"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
$(function(){
var video, $output;
var scale = 0.25;
var initialize = (function() {
$output = $('#output');
video = $('#video').get(0);
$('#capture').on('click', function(){
captureImage();
})
})()
var captureImage = function(){
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var image = document.createElement('img');
image.src = canvas.toDataURL();
$output.prepend(image);
}
})
</script>
</body>
</html>
注意：視頻必須部署在本地，否則會出現截圖跨域問題，視頻可以從下面的地址下載到本地
http://www.w3school.com.cn/i/...
http://www.w3school.com.cn/i/...
轉自：http://www.jb51.net/article/67951.htm