h5调用摄像头实现拍照上传

项目中需要用到调用摄像头拍照并上传照片到后台

1，前端页面

<!-- 头像采集 -->  
             <div id = "part2" name = "part">  
                    <div class="renxiang_box">  
//左侧拍照区域  
          <div class="renxiang_left_box">  
                   <video id="video" width="430" height="325" autoplay></video>   
              </div>  
              //采集到照片放入此区域  
              <div  id = "gatherDiv"  class="renxiang_center_box2">  
               <img id = "gather" src=""/>  
           </div>  
              //图形容器  
              <div  id = "canvasDiv"  class="renxiang_center_box">  
              <canvas id="canvas" width="430" height="325"></canvas>   
           </div>  
          <div class="renxiang_right_box">  
              <div class="renxiang_right_title_box">最近来访</div>  
             
               <div class="renxiang_right_box" id="pinjie"></div>  
                
           </div>  
       </div>  
       <div class="step_box">  
                
           <input type="button" value="下一步"  class="step_button" onclick="next(2)"  />  
                
              <input type="button" value="人证比对"  class="step_button" onclick = "contrast()" />  
                
               <!-- 
              <input type="button" value="人证比对"  class="step_button" onclick = "next(2)" /> 
               -->  
              <input type="button" value="拍照"  id="snap" class="step_button"  />  
       </div>  
</div>  
  
<div id ="part2-1"  name = "part">  
              <div class="renxiang_duibi_box">  
                    <div class="renxiang_duibi_left_box">  
                    <div class="renxiang_duibi_left_picture_box">  
                           <p class="renxiang_duibi_left_picture_box_p1">  
                                  <canvas id="canvas1" width="180" height="220"></canvas>   
                           </p>  
                           <p class="renxiang_duibi_left_picture_box_p2">  
                                  <img src="<%=basePath%>/css/skins/touch/images/default_photo.png"/>  
                           </p>  
               </div>  
              <div class="renxiang_duibi_left_font_box">  
                    <p class="renxiang_duibi_left_font_box_p1">现场照片</p>  
                    <p class="renxiang_duibi_left_font_box_p2">证件照片</p>  
               </div>  
               <div class="renxiang_duibi_left_jieguo_box">  
                    <p class="renxiang_duibi_left_jieguo_box_p1">人证比对相似度</p>  
                    <p id = "xiangsidu"></p>  
                    </div>  
              </div>  
           <div class="renxiang_duibi_right_box">  
              <div class="renxiang_duibi_right_title_box">黑名单库相似度比对</div>  
               <%if(true){//如果不是黑名单人员 %>  
                   <div class="renxiang_duibi_right_none_icon_box"></div>  
                    <div class="renxiang_duibi_right_none_font_box">此人不在黑名单库中</div>  
               <%}else{ %>  
               <div class="renxiang_duibi_right_picture_box">  
                    <p class="renxiang_duibi_right_picture_box_p1"></p>  
                   <p class="renxiang_duibi_right_picture_box_p2"><img src="<%=basePath%>/css/skins/touch/images/default_photo.png"/>91.52352%</p>  
                   <p class="renxiang_duibi_right_picture_box_p2"><img src="<%=basePath%>/css/skins/touch/images/default_photo.png"/>89.34719%</p>  
                   <p class="renxiang_duibi_right_picture_box_p2"><img src="<%=basePath%>/css/skins/touch/images/default_photo.png"/>85.16836%</p>  
                    <p class="renxiang_duibi_right_picture_box_p1"></p>  
               </div>  
               <div class="renxiang_duibi_right_button_box">  
                    <input type="button" value="停止办理" onclick = "logout()"/>  
               </div>  
              <%} %>  
           </div>  
       </div>  
       <div class="step_box">  
              <input type="button" value="下一步"  class="step_button" onclick = "next(2);" />  
       </div>  
</div>

JS代码

// Put event listeners into place(本地摄像头调用)  
            window.addEventListener("DOMContentLoaded", function() {  
                   // Grab elements, create settings, etc.  
                   var canvas = document.getElementById("canvas"),  
                          context = canvas.getContext("2d"),//getContext唯一合法值2d  
                          video = document.getElementById("video"),  
                          videoObj = { "video": true },  
                          errBack = function(error) {  
                                console.log("Video capture error: ", error.code);  
                          };  
                            
                          var canvas1 = document.getElementById("canvas1");  
                          var context1 = canvas1.getContext("2d");//getContext唯一合法值2d  
                   // Put video listeners into place  
                   if(navigator.getUserMedia) { // Standard 如果用户允许打开摄像头  
                          //stream为读取的视频流  
                          navigator.getUserMedia(videoObj, function(stream) {  
                                video.src = stream;  
                                video.play();  
                          }, errBack);  
                   } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  根据不同的浏览器写法不同  
                          navigator.webkitGetUserMedia(videoObj, function(stream){  
                                video.src = window.webkitURL.createObjectURL(stream);  
                                video.play();  
                          }, errBack);  
                   }  
                   else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
                          navigator.mozGetUserMedia(videoObj, function(stream){  
                                video.src = window.URL.createObjectURL(stream);  
                                video.play();  
                          }, errBack);  
                   }  
                   document.getElementById("snap").addEventListener("click", function() {  
                          context1.drawImage(video, 0, 0, 180, 220);                      //drawImage方法：http://blog.csdn.net/u012193330/article/details/44996923  
                          context.drawImage(video, 0, 0, 430, 325);  
                          //将拍照的div显示，将采集的img隐藏  
                   $("#gatherDiv").hide();  
                   $("#canvasDiv").show();  
                          UploadPic();  
                   });  
                     
            }, false);  
              
            //上传图片到后台  
            function UploadPic() {  
                // Generate the image data（将Canvas的内容保存为图片借助toDataURL来实现） 方法返回一个包含图片展示的 data URI 。  
                var Pic = document.getElementById("canvas").toDataURL("image/jpg");                
                //对其进行base64编 之后的字符串  
                Pic = Pic.replace(/^data:image\/(png|jpg);base64,/,"")  
                var IdCard=document.getElementById('userCode').value;  
                // Sending the image data to Server  
                $.ajax({  
                    type: 'POST',  
                    url:  "<%=basePath%>/touch/touchIndexManager.do?method=uploadPic&type=0&IdCard="+IdCard,  
                    data: { "imageData" : Pic},  
                    success: function (msg) {  
                       // alert("Done, Picture Uploaded.");  
                    }  
                });  
            }

后台程序：

/** 
     * 上传拍摄的人脸照片 
     */  
    public void uploadPic(){  
        try {  
            String idCard = request.getParameter("IdCard");  
            String type = request.getParameter("type");  
            String imgStr;//接收经过base64编 之后的字符串      
            response.setContentType("text/plain");  
            imgStr =request.getParameter("imageData");  
              
            if (imgStr == null) // 图像数据为空  
                return ;  
                BASE64Decoder decoder = new BASE64Decoder();  
                // Base64解码  
                byte[] b = decoder.decodeBuffer(imgStr);  
                for (int i = 0; i < b.length; ++i) {  
                    if (b[i] < 0) {// 调整异常数据  
                        b[i] += 256;  
                    }  
                }  
                  
                File file =new File(ConfigUtil.getPhotoFileAddr());      
                //如果文件夹不存在则创建      
                if  (!file .exists()  && !file .isDirectory()){         
                    file .mkdir();      
                }  
                // 生成jpeg图片  
                String imgFilePath = "";  
                if(type.equals("0")){  
                    imgFilePath = ConfigUtil.getPhotoFileAddr()+idCard+"_photo.jpg";// 新生成的图片  
                }else{  
                    imgFilePath = ConfigUtil.getPhotoFileAddr()+idCard+".jpg";// 新生成的图片  
                }  
                OutputStream out = null;  
                try {  
                    out = new FileOutputStream(imgFilePath);  
                } catch (FileNotFoundException e) {  
                    // TODO Auto-generated catch block  
                    e.printStackTrace();  
                }  
                out.write(b);  
                out.flush();  
                out.close();  
        } catch (IOException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        }  
    }