敬请关注博客，后期不断更新优质博文，谢谢
项目中需要用到调用摄像头拍照并上传照片到后台，特此记录：如有不足，望广大同行们批评指出。
1，前端页面
visitor/touch/touchIndex/list.jsp:前端页面 <!-- ****************************************************人像采集******************************************************* --> <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>
2，js
visitor/touch/touchIndex/list.jsp: // 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."); } }); }
后台程序：
/** * 上传现成拍摄的人脸照片 * 2017年5月12日 * author:zhouzhixiang */ 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(); } }
欢迎加入Java猿社区
