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

Posted by Naah on Friday, May 12,2017 10:00:14

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

1 前端标签

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>

2 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>

2.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.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;
	}

2.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("图片上传失败...");
			}
		});
    }

3 后端方法

3.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();
	}

3.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;
	}