HTML打開攝像頭，進行拍照上傳

本文轉載自查看原文 2016-04-27 10:43 16961 java/ 拍照

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 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 H5調用攝像頭拍照上傳 js調用攝像頭拍照上傳圖片 js調用USB攝像頭拍照上傳照片網站建設中使用HTML5實現使用手機攝像頭拍照上傳的功能 HTML5按鍵打開攝像頭和拍照 html pc調用攝像頭進行拍照在網頁中調用攝像頭實現拍照上傳 - 高拍儀二次開發 html5調用攝像頭並拍照 vue打開攝像頭拍照並上傳至服務器 html5打開攝像頭並用canvas模擬拍照 - 轉