HTML5实现在线抓拍 

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<title>在线拍照</title>
</head>
<body>
<video id="camVideo" width="400" height="328" autoplay></video> <br />
<button  id="snap">抓图</button> <br />
<table>
<tr>
 <td><canvas id="canvas" width="400" height="328" /></td><td><input name="imgData" id="imgData" style="width:600px"/></td>
</tr>
</table>
<script>
 
$(function(){
     // 获取元素，创建配置
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var video = document.getElementById("camVideo");
    var videoObj = { "video": true };
    var errBack = function(error) {
      console.log("Video capture error: ", error.code); 
    };
 
  // 添加视频监听器
  if(navigator.getUserMedia) { // 标准的API
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
     }, errBack);
  }
   
   document.getElementById("snap").addEventListener("click", function() {
   context.drawImage(video, 0, 0, 400, 328);
   var dataUrl = context.canvas.toDataURL("image/png");
      $( "#imgData" ).val( dataUrl );
   });
});
</script>
</body>
</html>

 

posted @ 2014-09-26 16:22  李小加  阅读(703)  评论(0)  编辑  收藏  举报