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

admin

       最近一个需求就是做一个二维码扫描的功能，但是又不想使用安卓APP的方式实现，百度了一下貌似HTML5可以实现。
4 u" [+ }5 E  d. _. P# ~( @

- U$ m2 B  a; L1 |0 }- k* o项目使用环境以及工具：
% g7 L; l$ T* W
, ^' K) i5 a( g1 Q# E8 qEclipse，JDK1.7，struts2，HTML5，Jquery,QRCode
, V) n- v* d, q) G/ C

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

        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。

一、视频流

9 j3 j5 G5 _; ~9 _& O) ]       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

二、拍照

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

三、 获取图片
" G3 U, a; ~/ u$ J/ D# ~
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
5 b# n* @5 Z1 \　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
3 X* h' S! k! `, ]+ G8 T; t# m( J
var data=imgData.substr(22);
# U% ~4 m  F/ X
　　第二种：就是替换；前面的部分为"";
3 k' X; R+ J/ L5 B3 U
var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
4 _* j0 {% a9 g
% H0 X6 U; M  }3 c$ j# Y! b反正不管如何实现，能获取到图片流即可、

/ X6 M2 b( Y) G" o四、上传图片并解析

0 i2 G* y! y+ a" N使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

0 t# O# _0 {* }! D  U! N( R前台部分代码：

1. <video  id="video">
   4 p, R% y; ?2 c: }, U
2. <script>
   
3.     var flag = true;
   $ i# M7 e' d3 B/ F7 d5 B
4.     window.addEventListener("DOMContentLoaded", function () {
   . P+ m9 [; f6 o, C7 V/ X
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   3 m& `+ I- |: C. B* o( m9 V8 v+ X
7.             canvas = document.createElement("canvas");
   6 G, r  F  E0 v3 D
8.             canvas.width = 600;
   
9.             canvas.height = 600;
   " l, V8 X4 x1 Q7 K! ?' P
10.             context = canvas.getContext("2d");
      l$ h% u( U2 B5 F
11.         } catch (e) { alert("not support canvas!"); return; }
    3 {( ~- n) d  m
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    / f& @. _! \0 H, G+ o5 i! ]
13. 
    
14.         if (navigator.getUserMedia)
    + ?0 k' x: Z  s$ Q" K9 ^
15.             navigator.getUserMedia(
    
16.                 { "video": true },
    : B+ D' p) V. N+ Q& |) m4 [, i9 W
17.                 function (stream) {
      v& f9 i- D' z: B
18.                     if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
    $ ?1 p. E/ {( s2 M( r* a3 I( X
19.                     else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
    
20.                     video.play();
    5 ?  O: ~( Q( P0 h
21.                 },
    
22.                 function (error) {
    & k: J7 f4 [: P0 x3 a
23.                     alert("请检查是否开启摄像头");
    
24.                     flag = false;
    7 m/ L2 H$ O3 r
25.                 }
    , `1 ]$ c/ n  ]0 T' [( A8 {3 `
26.             );
    4 Y- R# Q: i( D( J& y" G
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    
28.       
    ' r/ u6 g& D2 T' O
29.         setInterval(function () {
    : V" x3 Q# {4 l6 x  D4 n1 U
30.                 if(!flag){
    
31.                         return;
    : [& h4 b) ~5 m5 t8 p
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
    5 @& X2 B' F, A3 N5 O* a+ C
42.                                 },
    ' }7 j; \/ W7 o. o7 d/ v) y
43.                                 success : function(result) {
    9 E% g+ @  |6 b6 b( i" W
44.                                           
    . m, r+ S) s9 E; J
45.                                 },
    2 ~% x$ ?7 C: t+ E) h) `8 f
46.                     });
    
47.         }, 5000);
    
48.     }, false);
    
49. </script>

复制代码

/ `4 `8 ^* r! \5 c后台部分代码：
7 ^! i& u  x/ R* W1 W0 P. U6 X

1. /**
   
2.          * 解析二维码
   & v, g- [" t1 z. y
3.          * @Author        张志朋
   
4.          * @return  String
   
5.          * @Date        2016年7月9日
   * S! S; }9 C8 U5 E3 n
6.          * 更新日志
   
7.          * 2016年7月9日 张志朋  首次创建
   8 ~2 O/ D3 h2 E
8.          *
   & n& u6 x$ z2 Y
9.          */
   0 I' g6 O3 l' o! L
10.         public String decoderQRCode(){
    
11.                 try {
    
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    
14.                         String imgName = sdf.format(new Date()) + ".png";
    9 O( w' f( B" P" ^. `6 I" ?
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    # N1 G# ?" H+ S/ w
16.                         OutputStream out = new FileOutputStream(filePath);
    & t1 @% w5 s; F7 L
17.                         QRCode.GenerateImage(img,out);//生成图片
    
18.                         message   = QRCode.decoderQRCode(filePath);
    / e6 C5 h7 B8 ~
19.                 } catch (Exception e) {
    ' a9 @. V+ Y* |3 i" F( `
20.                         e.printStackTrace();
    
21.                 }
    
22.                 return Action.SUCCESS;
    
23.         }

复制代码

  G- D$ e0 M1 q" O4 L调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！
0 F) N9 H, `! u, }7 H9 F0 g* S
5 q4 u$ H) A3 |4 f' ]

7 v1 M: B# }* R" E/ F

有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。
; A7 Q' i* H$ b! \+ h
9 r: `2 M( L. U0 z" M5 @% H附上演示地址：http://monitor.52itstyle.com/
( b  h, a5 |, o1 m6 p
+ l8 t; T3 d: P项目源码下载地址

  b' j) J/ _, i# D4 b% e& G8 i9 j
提取码：
3 {' |% w* @7 ?  g2 n: z

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

8 z4 T% w* B9 u& x# g! A

/ k" C( ]1 }5 X. ~, k- s* f" H* X) r% v

星书雨

感谢楼主的分享，谢谢。

nationzhou

这个好，下来研究研究

strawhatcici

回复领取项目码
2 E6 J9 B! F) `/ N2 H

chenxin

哈哈哈哈哈哈呵呵
& Y' F4 Z4 S9 D3 p0 I7 M4 p. C

beneny

威武霸气啊~

奋斗诠释梦想

感谢楼主分享~~

奥特曼

1233333333333

liuxf

很棒得资源，多谢分享

forever_momery

看看，借鉴借鉴，学习学习