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 }

相关阅读:
Mysql group by语句的优化
 Mysql join语句的优化
 jquery　只读
 【Unity Shaders】Transparency —— 使用渲染队列进行深度排序
 oracle多表查询之内连接，外连接语句总结
 String比较相等的问题探索
 markdown实例
 集合list里存储list，要遍历最底层list的对象元素的遍历方法
 System.out.println(i++); System.out.println(++i);的区别
 windows自动快捷方式
原文地址：https://www.cnblogs.com/zfy0098/p/5437992.html