JAVA整合HTML5實現掃描二維碼功能項目源碼

 最近一個需求就是作一個二維碼掃描的功能，可是又不想使用安卓APP的方式實現，百度了一下貌似HTML5能夠實現。


項目使用環境以及工具：

Eclipse，JDK1.7，struts2，HTML5，Jquery,QRCode

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到服務器。這是手機微博應用中常見的功能，固然你也能夠在其它類型應用中適當使用此技術。

        這個功能不但手機端能夠實現PC端也能夠很好的實現，這個應用接口技術就是getUserMedia API，它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展現一下如何經過瀏覽器來訪問你的攝像頭，並提取截屏圖形。

1、視頻流 

      HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶能夠直接用 getUserMedia （請注意目前僅Chrome和Opera支持）得到攝像頭提供的視頻流。咱們須要作的是添加一個HTML5 的 Video 標籤，並將從攝像頭得到的視頻做爲這個標籤的輸入來源。

2、拍照

拍照是採用HTML5的Canvas功能，實時捕獲Video標籤的內容，由於Video元素能夠做爲Canvas圖像的輸入，因此這一點很好實現。

3、 獲取圖片

　　從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換爲base64位編碼的PNG圖像，相似於「data:image/png;base64,xxxxx」的格式。

var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變量就存儲了一長串的字符數據內容，表示的就是一個PNG圖像的base64編碼。由於真正的圖像數據是base64編碼逗號以後的部分，因此要讓實際服務器接收的圖像數據應該是這部分，咱們能夠用兩種辦法來獲取。
　　第一種：是在前端截取22位之後的字符串做爲圖像數據，例如：

var data=imgData.substr(22);

　　第二種：就是替換；前面的部分爲"";

var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");

反正無論如何實現，能獲取到圖片流便可、

4、上傳圖片並解析

使用 setInterval定時上傳到項目後臺使用開源QRCode.jar 解析圖片獲取二維碼信息。

前臺部分代碼：

1. <video  id="video">
2. <script>
3.     var flag = true;
4.     window.addEventListener("DOMContentLoaded", function () {
5.         var video = document.getElementById("video"), canvas, context;
6.         try {
7.             canvas = document.createElement("canvas");
8.             canvas.width = 600;
9.             canvas.height = 600;
10.             context = canvas.getContext("2d");
11.         } catch (e) { alert("not support canvas!"); return; }
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
13.  
14.         if (navigator.getUserMedia)
15.             navigator.getUserMedia(
16.                 { "video": true },
17.                 function (stream) {
18.                     if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
19.                     else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
20.                     video.play();
21.                 },
22.                 function (error) {
23.                     alert("請檢查是否開啓攝像頭");
24.                     flag = false;
25.                 }
26.             );
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
28.        
29.         setInterval(function () {
30.                 if(!flag){
31.                         return;
32.                 }
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", ""); 
35.             $.ajax({
36.                                 url : 'qRCodeAction_decoderQRCode.action',
37.                                 async : false,
38.                                 type : 'post',
39.                                 data : {
40.                                         'time' : (new Date()).toString(),
41.                                         'img' : image
42.                                 },
43.                                 success : function(result) {
44.                                           
45.                                 },
46.                     });
47.         }, 5000);
48.     }, false);
49. </script>

複製代碼

後臺部分代碼：

1. /**
2.          * 解析二維碼
3.          */
4.         public String decoderQRCode(){
5.                 try {
6.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
7.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
8.                         String imgName = sdf.format(new Date()) + ".png";
9.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
10.                         OutputStream out = new FileOutputStream(filePath);
11.                         QRCode.GenerateImage(img,out);//生成圖片
12.                         message   = QRCode.decoderQRCode(filePath);
13.                 } catch (Exception e) {
14.                         e.printStackTrace();
15.                 }
16.                 return Action.SUCCESS;
17.         }

複製代碼

調用電腦拍攝必定要容許操做。如今只須要HTML5的畫布技術和javaScript，咱們就能簡單快速的操做用戶的攝像頭。手機不只能夠調用攝像頭掃描，PC不單單能訪問攝像頭，並且利用HTML5強大的畫布技術，咱們能夠給圖片上加入各類迷人的濾鏡效果。如今，在瀏覽器裏用本身的攝像頭給本身拍張照片吧！

 


 
有些手機可能沒法調出攝像頭，那就趕忙換手機吧，別out了。

附上演示地址：http://monitor.52itstyle.com/