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上传URLdata:{imageData:pic},//imageData为后台接收pic的名字dataType:'text/html',//ajax返回的urlsuccess: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";//文件名=毫秒数+扩展名//生成要返回的urlString 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返回urlPrintWriter 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;}