SpringMVC H5 js摄像头拍照 ajax上传返回url路径

前几日项目中遇到的问题，对于这个问题网上的资料都不算完整，不过大概思路有很多，今天这里我就实现一下：

一、前端标签

canvas用于显示照片，video用于实时预览摄像头

<input class="btn btn-primary radius" type="button" onclick="paizhao()" id="pai"  value="  拍照  ">
<input class="btn btn-primary radius" type="button" onclick="upload()" value="  上传  "><br>
<canvas id="canvas"    ></canvas>
<video id="video"  autoplay="">
<script>camera();</script>

二、JS方法

本方法需引入JQ与ajaxfileupload，点我下载
根据路径引入

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"  src="lib/ajaxfileupload/ajaxfileupload.js"></script>

(1)下面该方法为初始化摄像头方法：

拍照前必须先调用该方法进行初始化摄像头，并允许浏览器使用摄像头

该方法在谷歌等浏览器最新版中必须使用HTTPS方可支持，目前在360浏览器以及谷歌老版本（44版）可支持！

function camera()
{

var video=document.getElementById("video");
var context=canvas.getContext("2d");
var errocb=function(){
console.log("sth srong");
}
if(navigator.getUserMedia){
navigator.getUserMedia({"video":true},function(stream){
video.src=stream;
video.play();
},errocb);
}else if(navigator.webkitGetUserMedia){
navigator.webkitGetUserMedia({"video":true},function(stream){
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},errocb);
}

}

（2）下面该方法为拍照方法：

function paizhao(){
var video=document.getElementById("video");
var context=canvas.getContext("2d");
document.getElementById("canvas").setAttribute("width",$('#video').width());//设置canvas的宽度
document.getElementById("canvas").setAttribute("height",$('#video').height());//设置canvas的高度
context.drawImage(video, 0, 0,$("#canvas").width(), $("#canvas").height());//将video截图到canvas
canvasflag=true;
}

（3）下面该方法为ajax上传方法：

本方法使用ajaxfileupload，需引入

function upload(){
var pic = document.getElementById("canvas").toDataURL("image/jpg");//将canvas转换为base64数据
pic = pic.replace(/^data:image\/(png|jpg);base64,/, "");//使用正则表达式将base64前方头去掉
$.ajaxFileUpload({
url:'uploadPic.naah',//该处为我们的ajax上传URL
data:{imageData:pic},//imageData为后台接收pic的名字
dataType:'text/html',//ajax返回的url
success:function(data,status){
var reg = /<pre.+?>(.+)<\/pre>/g;
var result = data.match(reg);  //使用正则表达式将格式去掉
data = RegExp.$1;
alert(data);       //data为最后的url
},
error:function(data,status,e){
alert("图片上传失败...");
}
});
}

三、后端方法

（1）后端代码

@RequestMapping("uploadPic.naah")
public void uploadPic(HttpServletRequest request,HttpServletResponse response,HttpSession session,String imageData) throws Exception
{
//获取绝对路径
String dirPath = request.getSession().getServletContext().getRealPath("files\\images");

//注意点：实际的图片数据是从 data:image/jpeg;base64后开始的 ,在前台我们已将该数据格式掉了
byte[] k = decodeBase64(imageData);
InputStream is = new ByteArrayInputStream(k);

//以每日年月日作为文件夹名
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String middlePath = sdf.format(new Date());
//用毫秒数作为文件的文件名
Long time = System.currentTimeMillis();
String fileNameStr = time + ".jpg";//文件名=毫秒数+扩展名

//生成要返回的url
String path = "files/images/" + middlePath + "/" + fileNameStr;
//生成文件保存路径
String picPath = dirPath + "\\" + middlePath + "\\" + fileNameStr;
//生成文件夹
dirPath = dirPath + "\\" + middlePath;
//写进文件
File p = new File(dirPath);
File a = new File(picPath);
//创建文件夹
if (!p.exists())
{
p.mkdirs();
}
//创建文件
if (!a.exists())
{
a.createNewFile();
}
FileOutputStream fos = new FileOutputStream(a);
//写入文件
fos.write(k);
fos.flush();
fos.close();
fos = null;

//ajax返回url
PrintWriter writer = response.getWriter();
writer.write(path);
writer.flush();
writer.close();
}

（2）通过反射机制调用java内部base64解密方法

public static byte[] decodeBase64(String input) throws Exception
{
Class clazz = Class.forName("com.sun.org.apache.xerces.internal.impl.dv.util.Base64");
Method mainMethod = clazz.getMethod("decode", String.class);
mainMethod.setAccessible(true);
Object retObj = mainMethod.invoke(null, input);
return (byte[]) retObj;
}