JAVA整合HTML5实现扫描二维码功能项目源码

admin

       最近一个需求就是做一个二维码扫描的功能，但是又不想使用安卓APP的方式实现，百度了一下貌似HTML5可以实现。

+ }% ^$ t  y: t
  ]! N9 t. A" l7 k  N( G项目使用环境以及工具：

, n- d: p1 U% E7 mEclipse，JDK1.7，struts2，HTML5，Jquery,QRCode

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。

1 G) q; `5 J$ l7 b% V! U7 Y        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。
8 s2 y, O( N8 g
7 w6 S* ~4 M, p8 E( c一、视频流

7 t8 K$ z" k! a3 J3 W- X1 W! ?  V       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

二、拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。

三、 获取图片
5 V8 o& ~. {; v: I+ L5 |/ Q
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

6 \  {+ l: e8 d. ?$ a' |: Z8 Svar imgData=canvas.toDataURL(“image/png”);
& _8 |( K8 C7 Q. m; q8 p6 i& G
4 R) }. m; w& P2 l% `2 v8 H+ K4 n这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
6 @( ]+ k7 d& L5 e% W, H
var data=imgData.substr(22);

　　第二种：就是替换；前面的部分为"";
' x: {' Z: G( ?$ D% \
var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");

反正不管如何实现，能获取到图片流即可、
- k  Q, p8 C5 T. @! V  O" h- f. Q
四、上传图片并解析
# \6 o8 e, V: u" ?
6 ]4 Q) l! E6 P( S( i1 }0 n使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

4 |: @! ?7 V% {1 S# Q- b. n0 X: H6 U前台部分代码：
; H/ C* H) h) h+ I* ?) m! S, v

1. <video  id="video">
   
2. <script>
   3 A9 O) n7 }3 Y. F7 D5 h! P7 o
3.     var flag = true;
   7 N* d5 F! Z4 C" q+ O
4.     window.addEventListener("DOMContentLoaded", function () {
   4 A& d( U0 {4 b! Z8 [/ Q! W
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   6 i% i! H& i9 ~+ Q6 G1 s7 U
7.             canvas = document.createElement("canvas");
   ( I1 T+ [' l& I* I1 q* \' N$ U
8.             canvas.width = 600;
   ; ^, k3 ]# ]4 [
9.             canvas.height = 600;
   
10.             context = canvas.getContext("2d");
    ( v  o2 V3 x  h% g6 I3 T
11.         } catch (e) { alert("not support canvas!"); return; }
    
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    + X  X9 p9 C) w2 w8 B0 I; J7 ~& V6 e
13. 
    
14.         if (navigator.getUserMedia)
    
15.             navigator.getUserMedia(
    
16.                 { "video": true },
    . c% F) M2 _  v3 c5 q" V. `, d4 J
17.                 function (stream) {
    2 B% n# @' r% |' ?8 P: g% t2 T
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;               
    ' X1 P" H# e2 o5 N. h% \
20.                     video.play();
    
21.                 },
    
22.                 function (error) {
    
23.                     alert("请检查是否开启摄像头");
    2 y+ {! U1 N; R1 E
24.                     flag = false;
    - q4 @7 N0 j- Q+ A2 `1 E
25.                 }
    ; |( N# {9 w% {" n
26.             );
    
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    # y6 f* [+ x2 C; d
28.       
    
29.         setInterval(function () {
    " p6 v4 }7 Z% N$ s' m; `( i
30.                 if(!flag){
    
31.                         return;
    # p* P% X# R. e
32.                 }
    
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
      f5 u' {0 W1 |! P, z' `, e
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    
35.             $.ajax({
    & t0 ^/ }1 u  K* p, O
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    ! f! r- X3 X/ Q8 ?3 r
37.                                 async : false,
    4 x5 B. `/ b) C+ |5 N
38.                                 type : 'post',
    
39.                                 data : {
    
40.                                         'time' : (new Date()).toString(),
    
41.                                         'img' : image
    
42.                                 },
    1 n5 ]1 C- J( d* _
43.                                 success : function(result) {
    8 K& r; d* h2 W) S2 z: P9 g: E! M6 ]* P" K! J
44.                                           
    . t; i# k- E  d! y; t
45.                                 },
    " _% F8 J# R; i1 Y
46.                     });
    , Z# Z4 n* J* H/ |
47.         }, 5000);
    ! Q' F4 w9 l: Y5 a5 P
48.     }, false);
    0 X0 H  a9 {9 [/ P" T9 }; @1 U
49. </script>

复制代码

* h! b+ o1 M* b" G3 x" F后台部分代码：
4 W0 N5 ?8 N; m% Q/ F  y

1. /**
   
2.          * 解析二维码
   
3.          * @Author        张志朋
   6 T2 t: [. M, y0 V8 p. K
4.          * @return  String
   ; `/ S2 q9 _& B; t
5.          * @Date        2016年7月9日
   
6.          * 更新日志
   - Y/ Y* c' @7 h
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   
9.          */
   
10.         public String decoderQRCode(){
    - g/ x2 P! z' o4 j7 H% Y
11.                 try {
    
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    
14.                         String imgName = sdf.format(new Date()) + ".png";
    
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    - ]$ I) J' T/ F. C
16.                         OutputStream out = new FileOutputStream(filePath);
    4 n  o7 P0 t! M) o' y! ^( q3 m7 r
17.                         QRCode.GenerateImage(img,out);//生成图片
    
18.                         message   = QRCode.decoderQRCode(filePath);
    
19.                 } catch (Exception e) {
    7 t6 u, f6 c2 w5 ~& m5 V8 o
20.                         e.printStackTrace();
    
21.                 }
    
22.                 return Action.SUCCESS;
    
23.         }

复制代码

$ d9 Q8 w' M# w9 P! y2 [' O1 {& f
调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！

- t/ P0 q4 u6 J8 ]9 G* l4 [. p. d
+ [& x: F, \: E

4 f- C- C, ?' c3 B# t9 K9 \, I
有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。
1 ~, l; z- T4 e- r
6 I  B) o: J& E( `' K9 C$ `' s7 _附上演示地址：http://monitor.52itstyle.com/

" T- I6 e5 s' p4 y: @" R项目源码下载地址
3 P3 ?4 O% g' Q4 J+ c

+ k* j: R2 ~' T提取码：
0 J* d: C- u6 V- T- j

游客，如果您要查看本帖隐藏内容请回复

9 E' [- H0 d% R7 }" \3 B" w. H) F

4 _1 ?: P% S  N4 {
) W) q+ k% n6 J- z6 c3 J

xinyinbo

七总威武啊

welcome123

查看该项目的提取码

未名湖

查看该项目的提取码

gaodawei

提取码啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

xiaowei

好！　谢谢

xiaowei

好！　谢谢

远方的九月

很久没有和html5一起用了,看看啊

浅时光

一直好奇这个，下下来看看

xpp123

学习一下 感谢分享