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

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

一、前端标签

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

<input class="btn btn-primary radius" type="button" onclick="paizhao()" id="pai"  value="&nbsp;&nbsp;拍照&nbsp;&nbsp;">
<input class="btn btn-primary radius" type="button" onclick="upload()" value="&nbsp;&nbsp;上传&nbsp;&nbsp;"><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;
	}