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/