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

admin

       最近一个需求就是做一个二维码扫描的功能，但是又不想使用安卓APP的方式实现，百度了一下貌似HTML5可以实现。
& b, }0 W: m& B+ S! U. w: K
5 Y' Z3 u' [; s" B4 ?
项目使用环境以及工具：

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

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

        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。
/ e  \: c6 R4 g( g, D' P/ c
: m- a; e- E' y* g一、视频流

/ Y" @  ~. A* x       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
8 w" z7 d5 I) a. v# _" D4 A
$ @% ^/ O- f# S  X二、拍照
; T) p, f5 ]+ J" G7 Y
4 `, y. Z9 X  b4 P+ ]拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。

三、 获取图片

7 d9 F6 ?* ?" C$ c　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
& Q1 O/ R; E; t
" j3 R3 D7 q" C2 h; [* Cvar imgData=canvas.toDataURL(“image/png”);
6 G1 v3 H6 B" E7 Z5 o+ E- U9 f' O
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
$ x5 ]- j  P% K$ T; ~3 ~　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
$ S% L  `. B+ C/ p* ?
var data=imgData.substr(22);

　　第二种：就是替换；前面的部分为"";

; }( z" D. M/ X, E4 pvar image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
7 l& c+ h0 b' j( `3 O
反正不管如何实现，能获取到图片流即可、
+ d( G  L  X" @: O" I2 t3 [* E
四、上传图片并解析
) x# t$ I% r) [, m0 m+ F' _( N
使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

0 \4 K; A/ E4 C2 y1 C( e前台部分代码：

1. <video  id="video">
   
2. <script>
   + ~7 ~, E' G; q" D5 g! l
3.     var flag = true;
   
4.     window.addEventListener("DOMContentLoaded", function () {
   
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   7 v: t8 j4 c) |
7.             canvas = document.createElement("canvas");
   ) I" Z5 `- L* r
8.             canvas.width = 600;
   
9.             canvas.height = 600;
   
10.             context = canvas.getContext("2d");
    ' d9 n& R! c' T+ J$ d3 x8 n. _" a% D
11.         } catch (e) { alert("not support canvas!"); return; }
    % S0 R' D9 g; _8 C' o0 n! h
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    ( X7 Q" X- p/ i# \$ g  c5 u# @
13. 
    
14.         if (navigator.getUserMedia)
    
15.             navigator.getUserMedia(
    ( o& |4 m( B' b: Q% r2 m
16.                 { "video": true },
    1 o8 R' |& N2 w- Y' l: Y2 q
17.                 function (stream) {
      s9 p2 x' |" u* @0 x$ ~; y
18.                     if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
    $ {+ w+ p" u0 h* ~0 p
19.                     else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
    1 c% @) k6 y( p: W( t
20.                     video.play();
    . T: V. u' b8 J( r8 l" ~1 J
21.                 },
    
22.                 function (error) {
    
23.                     alert("请检查是否开启摄像头");
    2 _" k9 g: p- _& y$ @) i
24.                     flag = false;
    9 n4 c) Q! h1 ?3 O( M
25.                 }
      C# z" Q3 z' w
26.             );
    
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    
28.       
    
29.         setInterval(function () {
    
30.                 if(!flag){
      Z) L% v' Q! A% l6 h; H
31.                         return;
    
32.                 }
    
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
    5 y$ \& K. X' @! z  ]7 i7 M
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    
35.             $.ajax({
    
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    
37.                                 async : false,
    9 G! `6 l4 t$ W) b
38.                                 type : 'post',
    
39.                                 data : {
    2 z8 f0 w+ U! {( H9 S
40.                                         'time' : (new Date()).toString(),
    
41.                                         'img' : image
    
42.                                 },
    
43.                                 success : function(result) {
    
44.                                           
    
45.                                 },
    
46.                     });
    
47.         }, 5000);
    
48.     }, false);
    ) V2 W" z' [: R3 p, K1 \+ d7 B
49. </script>

复制代码

% u1 A5 k9 D4 x% f$ T后台部分代码：
3 I8 q# M* I% E. U

1. /**
   7 H* b/ `$ h, k6 a& W
2.          * 解析二维码
   
3.          * @Author        张志朋
   * ^8 j9 m8 R: E2 B( }
4.          * @return  String
   
5.          * @Date        2016年7月9日
   5 v! W' E$ r7 J" j
6.          * 更新日志
   " ]7 g% ]6 R4 a( t. [
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   
9.          */
   
10.         public String decoderQRCode(){
    " J# w0 y' Z3 U9 n( a
11.                 try {
    
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    4 R- ^6 {1 Z: F+ L8 y
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    ! x9 A! Y8 L0 R9 l+ I2 ?
14.                         String imgName = sdf.format(new Date()) + ".png";
    
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    
16.                         OutputStream out = new FileOutputStream(filePath);
    
17.                         QRCode.GenerateImage(img,out);//生成图片
    
18.                         message   = QRCode.decoderQRCode(filePath);
    
19.                 } catch (Exception e) {
    # ?) l. D2 J9 x- {( e2 v# _
20.                         e.printStackTrace();
    4 d! {: u3 E/ J& ]3 U! F
21.                 }
    ) ?' q* i- U- _( s5 ]; E- K
22.                 return Action.SUCCESS;
    # U5 A4 b+ P; }1 x
23.         }

复制代码

  O; Y0 z5 d; B8 C& k7 ]调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！
5 A4 w4 e9 g* l5 f% {5 h: ]


1 z% G  g9 i# B$ L& J: v, G

* q: q* y5 K) j  H  H有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。

附上演示地址：http://monitor.52itstyle.com/
/ b" Y2 @7 q( m" Y; E- u
项目源码下载地址
2 R! f- w' D  g/ ]% B3 i3 {1 L6 J

提取码：
2 W/ Q, s. k# |8 P. j: `. V' d

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

9 u, D% E6 k& Z* i; F+ O: N( a* |

% f3 Z, W& a. E: Y! p( f

xinyinbo

七总威武啊

welcome123

查看该项目的提取码

未名湖

查看该项目的提取码

gaodawei

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

xiaowei

好！　谢谢

xiaowei

好！　谢谢

远方的九月

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

浅时光

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

xpp123

学习一下 感谢分享