HTML打开摄像头，进行拍照上传
html代码
1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <%@ include file="/includes/ctx.jsp" %> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>webcam</title> 8 <script type="text/javascript" src="${ctx}/js/jquery-1.11.2.js"></script> 9 <script type="text/javascript"> 10 window.onload = function (){ 11 try{ 12 //动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 13 document.createElement("canvas").getContext("2d"); 14 document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS"; 15 }catch(e){ 16 document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS"; 17 } 18 }; 19 20 //这段代 主要是获取摄像头的视频流并显示在Video 签中 21 window.addEventListener("DOMContentLoaded", function () { 22 var video = document.getElementById("video"); 23 var videoObj = { "video": true }; 24 var errBack = function (error){ 25 console.log("Video capture error: " + error.message, error.code); 26 }; 27 // 支持浏览器 谷歌,火狐,360,欧朋 28 //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow 29 if (navigator.getUserMedia) { 30 navigator.getUserMedia(videoObj, function (stream) { 31 video.src = stream; 32 video.play(); 33 }, errBack); 34 } else if (navigator.webkitGetUserMedia) { 35 navigator.webkitGetUserMedia(videoObj, function (stream) { 36 video.src = window.URL.createObjectURL(stream); 37 video.play(); 38 }, errBack); 39 } else if (navigator.mozGetUserMedia){ 40 navigator.mozGetUserMedia(videoObj, function (stream) { 41 video.src = window.URL.createObjectURL(stream); 42 video.play(); 43 }, errBack); 44 } 45 46 47 //这个是拍照按钮的事件， 48 document.getElementById("snap").addEventListener("click",function(){ 49 CatchCode(); 50 }); 51 }, false); 52 //定时器 53 //var interval = setInterval(CatchCode, "300"); 54 //这个是 刷新上 图像的 55 function CatchCode() { 56 //实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途 57 var canvans = document.getElementById("canvas"); 58 var video = document.getElementById("video"); 59 var context = canvas.getContext("2d"); 60 61 canvas.width = video.videoWidth; 62 canvas.height = video.videoHeight; 63 context.drawImage(video,0,0); 64 65 //获取浏览器页面的画布对象 66 //以下开始编 数据 67 var imgData = canvans.toDataURL("image/jpg"); 68 //将图像转换为base64数据 69 var base64Data = imgData.split(",")[1]; 70 71 var xhr = new XMLHttpRequest(); 72 xhr.open("post", "${ctx}/webcam.do", true); 73 //告诉服务器是以个Ajax 请求 74 xhr.setRequestHeader("X-Requested-Width", "XMLHttpRequest"); 75 var fd = new FormData(); 76 fd.append("doc",base64Data); 77 xhr.send(fd); 78 79 //alert(base64Data); 80 81 //在前端截取22位之后的字符串作为图像数据 82 //开始异步上 83 } 84 </script> 85 </head> 86 <body> 87 <div id="support"></div> 88 <div id="contentHolder"> 89 <video id="video" width="160" height="120" style="border:1px solid red" autoplay></video> 90 <button id="snap"> 拍照</button> 91 <canvas style="border:1px solid red" id="canvas"></canvas> 92 </div> 93 </body> 94 </html>
后台代码
1 package com.servlet; 2 3 import java.io.File; 4 import java.io.FileOutputStream; 5 import java.io.IOException; 6 import java.io.InputStream; 7 import java.io.OutputStream; 8 import java.util.Date; 9 import java.util.List; 10 11 import javax.servlet.ServletException; 12 import javax.servlet.http.HttpServlet; 13 import javax.servlet.http.HttpServletRequest; 14 import javax.servlet.http.HttpServletResponse; 15 16 import org.apache.commons.fileupload.FileItem; 17 import org.apache.commons.fileupload.FileUploadException; 18 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 19 import org.apache.commons.fileupload.servlet.ServletFileUpload; 20 21 import sun.misc.BASE64Decoder; 22 23 /** 24 * Servlet implementation class webcam 25 */ 26 public class webcam extends HttpServlet { 27 private static final long serialVersionUID = 1L; 28 29 /** 30 * @see HttpServlet#HttpServlet() 31 */ 32 public webcam() { 33 super(); 34 // TODO Auto-generated constructor stub 35 } 36 37 /** 38 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 39 * response) 40 */ 41 protected void doGet(HttpServletRequest request, 42 HttpServletResponse response) throws ServletException, IOException { 43 // TODO Auto-generated method stub 44 doPost(request, response); 45 } 46 47 /** 48 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 49 * response) 50 */ 51 protected void doPost(HttpServletRequest request, 52 HttpServletResponse response) throws ServletException, IOException { 53 request.setCharacterEncoding("utf-8"); 54 response.setCharacterEncoding("utf-8"); 55 response.setContentType("text/html;char=utf-8"); 56 57 // 获得磁盘文件条目工厂 58 DiskFileItemFactory factory = new DiskFileItemFactory(); 59 // 获取文件需要上传到的路径 60 // String path = request.getRealPath("/upload"); 61 String path = "d:/shangchuan/"; 62 63 // 如果文件夹不存在 将创建文件夹 64 if (!new File(path).exists()) { 65 new File(path).mkdirs(); 66 } 67 68 // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存， 69 // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同 70 /** 71 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 72 * 格式的 然后再将其真正写到 对应目录的硬盘上 73 */ 74 factory.setRepository(new File(path)); 75 // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室 76 factory.setSizeThreshold(1024 * 1024); 77 78 // 高水平的API文件上传处理 79 ServletFileUpload upload = new ServletFileUpload(factory); 80 81 try { 82 // 可以上传多个文件 83 List<FileItem> list = (List<FileItem>) upload.parseRequest(request); 84 85 for (FileItem item : list) { 86 // 获取表单的属性名字 87 String name = item.getFieldName(); 88 89 // 如果获取的 表单信息是普通的 文本 信息 90 if (item.isFormField()) { 91 // 获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的 92 String imgStr = item.getString(); 93 94 // base64解码并生成图片 95 BASE64Decoder decoder = new BASE64Decoder(); 96 try { 97 // Base64解码 98 byte[] bytes = decoder.decodeBuffer(imgStr); 99 // for (int i = 0; i < bytes.length; ++i) { 100 // if (bytes[i] < 0) {// 调整异常数据 101 // bytes[i] += 256; 102 // } 103 // } 104 // 生成jpeg图片 105 OutputStream out = new FileOutputStream("d:/ceshi.jpg"); 106 out.write(bytes); 107 out.flush(); 108 out.close(); 109 } catch (Exception e) { 110 e.printStackTrace(); 111 } 112 // request.setAttribute(name, value); 113 }else { 114 // 对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些 115 /** 116 * 以下三步，主要获取 上传文件的名字 117 */ 118 // 获取路径名 119 String value = item.getName(); 120 // 索引到最后一个反斜杠 121 int start = value.lastIndexOf("\\"); 122 // 截取 上传文件的 字符串名字，加1是 去掉反斜杠， 123 String filename = value.substring(start + 1); 124 // 将当前时间戳 作为的文件名 125 String newfilename = Long.toString(new Date().getTime()) 126 + filename.substring(filename.indexOf('.')); 127 request.setAttribute(name, newfilename); 128 129 // 真正写到磁盘上 130 // 它抛出的异常 用exception 捕捉 131 132 // item.write( new File(path,filename) );//第三方提供的 133 134 // 手动写的 135 OutputStream out = new FileOutputStream(new File(path, 136 newfilename)); 137 138 InputStream in = item.getInputStream(); 139 140 int length = 0; 141 byte[] buf = new byte[1024]; 142 143 System.out.println("获取上传文件的总共的容量：" + item.getSize()); 144 145 // in.read(buf) 每次读到的数据存放在 buf 数组中 146 while ((length = in.read(buf)) != -1) { 147 // 在 buf 数组中 取出数据 写到 （输出流）磁盘上 148 out.write(buf, 0, length); 149 } 150 in.close(); 151 out.close(); 152 } 153 } 154 155 } catch (FileUploadException e) { 156 // TODO Auto-generated catch block 157 e.printStackTrace(); 158 } catch (Exception e) { 159 // TODO Auto-generated catch block 160 e.printStackTrace(); 161 } 162 } 163 }
