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 }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
