h5调用摄像头+拍照+上传图片-----h5+js+ajax
2024-04-09 23:03:15
敬请关注博客，后期不断更新优质博文，谢谢
项目中需要用到调用摄像头拍照并上传照片到后台，特此记录：如有不足，望广大同行们批评指出。
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唯一合法值2dvideo = 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 placeif(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-prefixednavigator.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/44996923context.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 blocke.printStackTrace();}out.write(b);out.flush();out.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}欢迎加入Java猿社区
h5调用摄像头+拍照+上传图片-----h5+js+ajax相关推荐
- H5调用摄像头拍照,录音及选择文件
我们可以使用H5中的input标签来调用原生摄像头,录音及文件管理 1. 调用相机拍照: <input type="file" accept="image/*&qu ...
- h5调用摄像头拍照可以自定义拍照页面吗_回归单摄时代？小米伸缩式摄像头技术曝光，网友：好家伙...
前些日子,小米在开发者大会上为我们展示了其最新研发的数项技术,对于摄影爱好者来说,最为吸引人的莫过于小米全新的伸缩式大光圈镜头.从技术展现上来看,小米这次一反平常,采用了"增加摄像头个数来提 ...
- Atititjs h5调用摄像头视频聊天 拍照功能 相机功能 录像attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
- 移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
- jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
- h5前端调用android拍照功能,H5调用Android拍照和摄像以及选取相册
之前一直认为H5调用Android,H5不需要Android配合能直接实现功能.前段时间,自己做这个功能,才发现不是这么回事. H5编写 html文件里只需要标签即可实现代码,代码如下所示: 拍照 ο ...
- js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
- Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
最新文章
- 3d大爱心c语言程序,C语言控制台打印3D爱心图案
- 人声提取工具Spleeter安装教程（linux）
- ZendServer下安装Typecho需要注意问题
- 正则表达式匹配单行注解
- 电脑ip地址设置_路由器怎么设置静态IP 路由器设置静态IP方法【详解】
- 禁用导航栏的右滑返回实现全屏手势返回
- android button的selector
- Futter基础第19篇： 实现调用第三方时间选择器、日期选择器、时间戳
- jQuery和asp.net mvc相关资源链接
- Crystal Ball—甲骨文水晶球风险管理软件（概念以及实战——中级案例篇）
- RDP Wrapper 大于10.0.19041
- Java8日期时间API
- Tourist Behaviour Themes and Conceptual Schemes--Chapter 1 Studying Tourist Behaviour
- 苹果11触屏不灵敏_苹果iPhone11Pro屏幕失灵怎么办
- 第三阶段应用层——1.7 数码相册—电子书（6）—支持远程打印信息
- 一个近乎完美的Unity全平台原生c#热更方案
- Chrome不清空历史记录直接删除地址栏记录的方法
- postgres查询序列_PostgreSQL 序列使用
- 厦门大学计算机网络实验三
- 2020JavaScript技能抽查