HTML标签内容：
//提示框CSS <style type="text/css"> .confirm_ul{list-style:none;margin:0px;padding:0px;width:70%;margin: auto;margin-top: 210%;} .confirm_title{background:#F2F2F2;text-align:left;padding-left:20px;line-height:60px;border:1px solid #999;} .confirm_content{background:#fff;height:80px;line-height:20px;padding:10px;} .confirm_btn-wrap{background:#fff;height:30px;line-height:18px;text-align: right;} .confirm_btn{cursor:pointer;color:#2bd00f;margin-right: 35px;} .confirm_btn-wrap > a:nth-child(1){color: #9c9898;} .dis{display: none;} </style> //视频界面 <div style="display:none;text-align:center;" id="Living"> <!--人脸框--> <div class="change"> <p></p> <video id="video" width="300" height="250"></video> <p></p> </div> <!--拍照--> <div> <button class="div-buttonClass" id="capture"><span class="div-buttonSpan">点击进行识别</span></button> </div> <!--图片模块--> <div> <canvas id="canvas1" width="400" height="400" style="display: none;"></canvas> <canvas id="canvas2" width="400" height="400" style="display: none;"></canvas> </div> </div> <!--弹出框-alert--> <div id="alert" class="dis" style="position:absolute;background:rgba(0, 0, 0, 0.58);width:100%;height:220%;top:0;textAlign:center;lineHeight:150px;z-Index:300;fontSize:12px"> <ul class="confirm_ul"> <li id="li2" class="confirm_content" ></li> <li class="confirm_btn-wrap"> <a></a> <a type="button" value="确定" onclick="alertOk()" class="confirm_btn" >确定</a> </li> </ul> </div> <input type="hidden" id="tableId" />JSCRIPT内容：
//调用媒体设备 function OpenLiving(){ if(!nullValidation()){return false;} let video = document.getElementById('video'); //显示活体界面 document.getElementById("topLiving").style.display=""; document.getElementById("Living").style.display=""; let canvas1 = document.getElementById('canvas1'); let canvas2 = document.getElementById('canvas2'); let context1 = canvas1.getContext('2d'); let context2 = canvas2.getContext('2d'); if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { //调用用户媒体设备, 访问摄像头 getUserMedia({video : {width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 }}}, success, error); } else { tz=true; Alert('不支持访问用户媒体',"setOpen.html"); document.getElementById("Living").style.display="none"; } document.getElementById('capture').addEventListener('click', function () { context1.clearRect(0, 0, 400, 400); context1.drawImage(video, 0, 0, 480, 320); sleep(2000); context2.clearRect(0, 0, 400, 400); context2.drawImage(video, 0, 0, 480, 320); }) } //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的标准API navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit核心浏览器 navigator.webkitGetUserMedia(constraints,success, error) } else if (navigator.mozGetUserMedia) { //firfox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //旧版API navigator.getUserMedia(constraints, success, error); } } function success(stream) { //兼容webkit核心浏览器 let CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 //console.log(stream); mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]; //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { tz=true; Alert('访问用户媒体设备失败',"setOpen.html"); document.getElementById("Living").style.display="none"; console.log(`访问用户媒体设备失败${error.name}, ${error.message}`); } //关闭摄像头 function close() { mediaStreamTrack && mediaStreamTrack.stop(); } //添加时间间隔 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } //提示框 function Alert(str,goUrl){ $("#alert").removeClass("dis"); $("#li2").html(str); $("#tableId").val(goUrl); } function alertOk(){ $("#alert").addClass("dis"); if(tz){ tz=false; window.location.href=$("#tableId").val(); } }上传提交代码：
var canvas1 = document.getElementById("canvas1"); var canvas2 = document.getElementById("canvas2"); var dataurl = canvas1.toDataURL("image/png"); var dataur2 = canvas2.toDataURL("image/png"); var videoPhotos1 = encodeURIComponent(dataurl); var videoPhotos2 = encodeURIComponent(dataur2); //关闭相机 close(); parameter["videoPhotos1"]=videoPhotos1; parameter["videoPhotos2"]=videoPhotos2; var requestDate=ajax("xxx",parameter);//需要URL //Alert(JSON.stringify(requestDate)); if(requestDate["code"] != 10000){ }else{ tz=true; Alert("提交成功","##.html"); } //ajax请求（请求路径url,请求参数json） HJSJ.ajax=function(url,json){ var requestDate=""; $.ajax({ url: url, type:"post", contentType: "application/json", data:json, cache:false, async:false,//同步 false 异步 true success:function(data){ requestDate=data; }, error:function(jqXHR, textStatus, errorThrown){ var da={}; da["code"]=30001; da["msg"]=jqXHR.status+":"+jqXHR.statusText; requestDate=da; //HJSJ.prompts("error",jqXHR.status+":"+jqXHR.statusText); /* 第一个参数 jqXHR ： readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。 status ：返回的HTTP状态码，比如常见的404,500等错误代码。 statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。 responseText ：服务器响应返回的文本信息 第二个参数 String textStatus：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息："timeout"（超 时）, "error"（错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值。 第三个参数 String errorThrown：也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。*/ } }); return requestDate; };服务器代码：
import java.net.URLDecoder; import net.sf.json.JSONObject; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; @RequestMapping("/xxx") @ResponseBody public Object setOpen(@RequestBody String jsonstring,HttpServletRequest request) { Map<String, Object> map1 = new HashMap<String, Object>(); Map<String, Object> map2 = new HashMap<String, Object>(); JSONObject parameterObject = JSONObject.fromObject(jsonstring); String videoPhotos1=parameterObject.optString("videoPhotos1"); String videoPhotos2=parameterObject.optString("videoPhotos2"); //照片存放本地服务器地址 String webAddress=request.getSession().getServletContext().getRealPath("/"); String url=webAddress+"upLoadPicture/"; map1.put("videoPhotos1",videoPhotos1); map1.put("videoPhotos2",videoPhotos2); boolean res = true; for (int i=1; i<=2; i++) { String photoBase64 = map1.get("videoPhotos" + i).toString(); // 去除开头不合理的数据 photoBase64 = photoBase64.substring(30); photoBase64 = URLDecoder.decode(photoBase64,"UTF-8"); String photoName = String.valueOf(UUID.randomUUID()) + ".png"; String imgUrl = url + photoName; res= Base64Util.GenerateImage(photoBase64,imgUrl); if(!res){ map.put("code", 10003); map.put("msg", "生成图片失败"); return map; } map2.put("videoPhotos" + i,photoName); } //将Base64转换为图片 public static boolean GenerateImage(String imgStr,String url){ if (imgStr == null) return false; BASE64Decoder decoder = new BASE64Decoder(); try { //Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for(int i=0;i<b.length;++i) { if(b[i]<0) {//调整异常数据 b[i]+=256; } } //生成jpeg图片 OutputStream out = new FileOutputStream(url); out.write(b); out.flush(); out.close(); return true; } catch (Exception e) { LogUtil.error("error:图片转换失败！"+e.getMessage()); return false; } } }
