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

admin

       最近一个需求就是做一个二维码扫描的功能，但是又不想使用安卓APP的方式实现，百度了一下貌似HTML5可以实现。
+ i) q2 ~5 Z  |; ?0 x# l* U' Y
9 _+ c! s/ w" Q7 S
/ ?6 p- S0 g. S! v, ]项目使用环境以及工具：

Eclipse，JDK1.7，struts2，HTML5，Jquery,QRCode
5 p* T% {. s& a) I

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

3 }( E+ ^! y/ `( O, G8 d7 c        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。
" ^: ?5 U& p9 m3 p2 u
一、视频流
% ]9 z) ~" @2 K+ f* Z
5 t$ }4 _4 U+ u. F  e       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
, M" o/ A1 d) i7 l& n  t
二、拍照
* d6 `9 P( E. b* R
, X! v) K0 v- r  [. }4 Z; l拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。
9 {* o" w. P1 M  r$ a
) S( M# ]- m6 S) j% M7 f三、 获取图片

3 A, T6 v: H+ Q) S　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
( ^- ~8 h/ [* r
% k9 P; k+ H8 R1 s+ y5 Evar imgData=canvas.toDataURL(“image/png”);

( C& a' M- `* [. f这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
2 A. P; t$ F" k) h9 s　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
7 M+ m9 A& M5 f: E2 ~7 G
var data=imgData.substr(22);
8 U! r" {& q. O
5 j9 z9 A+ O( U　　第二种：就是替换；前面的部分为"";
: e3 Y' C7 V1 z0 O9 v
  O8 n0 d* A# w0 w( n2 {var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
0 H+ S4 M( a  S7 E! @& R
  m) G  }1 t3 V反正不管如何实现，能获取到图片流即可、
- F+ [! r8 G2 E
四、上传图片并解析

使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。
9 }7 e- `7 L( J) [  g* {9 |1 g
前台部分代码：

1. <video  id="video">
   
2. <script>
   
3.     var flag = true;
   
4.     window.addEventListener("DOMContentLoaded", function () {
   2 Z1 \3 M; h: Y  @* m/ [
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   
7.             canvas = document.createElement("canvas");
   1 T# v5 }9 W5 x' K$ L& t" d1 ]4 [
8.             canvas.width = 600;
   
9.             canvas.height = 600;
   $ ~6 ^: {& [. V
10.             context = canvas.getContext("2d");
    " S( h( S2 n& i9 y! M2 x7 L
11.         } catch (e) { alert("not support canvas!"); return; }
    ' a1 ~' i: g; U5 L
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
13. 
    
14.         if (navigator.getUserMedia)
    
15.             navigator.getUserMedia(
    / K3 A: R6 K  d- {
16.                 { "video": true },
    - E4 B/ x+ Z, v# B7 \/ P+ g
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) {
    : d- d& d# g% J, m+ b4 f" `! X
23.                     alert("请检查是否开启摄像头");
    . Z: S1 w7 ^# d+ F. A# Y
24.                     flag = false;
    7 C/ `+ c$ Z6 w; i- @0 t
25.                 }
    $ \2 T/ U+ a2 ^% Q' `/ j, G% C5 e
26.             );
    
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    
28.       
    * I7 O8 y5 P% ?  q# V6 Y
29.         setInterval(function () {
    # S6 A) }0 T, i- ^% t- e) L
30.                 if(!flag){
    + L& k+ X6 C) a# \
31.                         return;
    
32.                 }
    
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
    & ^7 {& M5 L, B1 P1 z' e& @
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    7 t8 p; T9 |4 }- ^" M2 R( m- F
35.             $.ajax({
    1 w) S- X3 _/ }/ s! {& N  c8 ^
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    
37.                                 async : false,
    
38.                                 type : 'post',
    
39.                                 data : {
    ! O! R0 O+ z. i& i; \" ?
40.                                         'time' : (new Date()).toString(),
    9 z' C# r; D, J9 S4 W
41.                                         'img' : image
    6 P8 o) a* k4 Z3 o% c* ?  @
42.                                 },
    
43.                                 success : function(result) {
    
44.                                           
    
45.                                 },
    
46.                     });
    
47.         }, 5000);
    
48.     }, false);
    
49. </script>

复制代码

! D$ m3 f4 b3 N4 Q) X' Y8 O后台部分代码：
; n& x4 U; @: Y( B

1. /**
   
2.          * 解析二维码
   
3.          * @Author        张志朋
   
4.          * @return  String
   6 F2 E: c; Q$ n5 N& c  G4 I( o
5.          * @Date        2016年7月9日
   ' B( X5 Z9 v% }8 S
6.          * 更新日志
   $ U# {; X/ p& O! K9 J$ e
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   % ^) l" ?0 d% B5 P# I9 t
9.          */
   $ K) L2 {4 X% q  G# c4 b1 q
10.         public String decoderQRCode(){
    
11.                 try {
    
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    ; a! ^- C& a+ P# {$ s' |% c: ?
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    * |7 c0 o% s6 T; y) V- h9 H8 E
14.                         String imgName = sdf.format(new Date()) + ".png";
    & s2 I+ l% ?% k1 o. X
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    
16.                         OutputStream out = new FileOutputStream(filePath);
    
17.                         QRCode.GenerateImage(img,out);//生成图片
    " r" k7 I9 R2 t) I
18.                         message   = QRCode.decoderQRCode(filePath);
    
19.                 } catch (Exception e) {
    ) w9 ?6 l' g! {
20.                         e.printStackTrace();
    
21.                 }
    
22.                 return Action.SUCCESS;
    # [7 T" p* _4 I3 `% N* S9 s
23.         }

复制代码

) N5 t( R% T% C0 g( D
调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！
7 P9 ?- p5 X# z- {



) g1 D' ~, C0 i; B1 n* U5 \3 t: d: O
% M0 L  j) t7 [有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。

) S( H7 X7 o8 ?5 `) k4 ~+ l, Z附上演示地址：http://monitor.52itstyle.com/

6 y2 v& s* a# d5 `6 m6 s项目源码下载地址
+ q3 I& B  q4 `
6 E0 l9 i% v8 C) p8 R6 O
1 x: {2 r( U: V, w4 B# }提取码：

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

$ Q  l& p# a5 D3 A8 U
9 G* t  w% m9 a+ M
! [: S% B4 U  b) f$ }2 v

星书雨

感谢楼主的分享，谢谢。

nationzhou

这个好，下来研究研究

strawhatcici

回复领取项目码

chenxin

哈哈哈哈哈哈呵呵

beneny

威武霸气啊~

奋斗诠释梦想

感谢楼主分享~~

奥特曼

1233333333333

liuxf

很棒得资源，多谢分享

forever_momery

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