h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客，后期不断更新优质博文，谢谢
项目中需要用到调用摄像头拍照并上传照片到后台，特此记录：如有不足，望广大同行们批评指出。
1，前端页面
visitor/touch/touchIndex/list.jsp:前端页面
//左侧拍照区域
//采集到照片放入此区域
![]()
//图形容器
最近来访
现场照片
证件照片
人证比对相似度
黑名单库相似度比对
<%if(true){//如果不是黑名单人员 %>
此人不在黑名单库中
<%}else{ %>
91.52352%
89.34719%
85.16836%
<%} %>
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猿社区
