<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拍照</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.videoArea{
width: 320px;
height: 320px;
border: 1px solid #ccc;
}
.can{
width: 320px;
height: 320px;
border: 1px solid #ccc;
}
.btn{
width: 71px;
height:30px;
line-height: 28px;
}
</style>
</head>
<body>
<div class="block">
<video id="video" class="videoArea" autoplay></video>
<canvas id="canvas" class="can none"></canvas>
<button type="button" class="btn" id="getPic">拍照</button>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cContext = canvas.getContext("2d");
var video = document.getElementById("video");
canvas.crossOrigin='anonymous';
if ( navigator.getUserMedia ){
navigator.getUserMedia({video:true}, function(stem){
video.src = stem;
video.play();
}, function(error){
alert(error);
});
}else if( navigator.webkitGetUserMedia ){
navigator.webkitGetUserMedia({video:true}, function(stem){
video.src = window.webkitURL.createObjectURL(stem);
video.play();
}, function(error){
alert(error);
});
}
document.getElementById("getPic").addEventListener("click", function(e){
cContext.drawImage(video,0,0,300,80);
var imgData = canvas.toDataURL("image/png");
var base64Data = imgData.substr(22);
});
</script>
</body>
</html>
拍照草稿
最新推荐文章于 2025-06-25 14:11:18 发布