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

admin

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

$ v. S7 s* l8 c
. V  J5 ~: I, J, @( E' g项目使用环境以及工具：
, k3 m4 ^5 Y* b8 \! L* Z. m
( V! k! J- |  _) j. \5 Q: HEclipse，JDK1.7，struts2，HTML5，Jquery,QRCode

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

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

一、视频流
# Q! q$ x  ]4 z0 D3 J# J) w
, T, q7 b- a/ f4 h% ^& j) v       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
1 m# Q1 g$ F% ], F0 J' N& \7 a2 _
4 h1 w- S; r: C8 G; N" g( q二、拍照

$ S% M: O) @8 o/ ?4 K% M( r4 r! \* i拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。
, K7 A; A0 G# o  W2 Z! }6 Q
三、 获取图片
* ^% _! b' k: G+ B/ p- ~
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
* e6 v) m/ U/ x) l
var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
& V% w8 D6 h# P7 z- D
. k7 [9 X/ t; ?" c3 e+ E: avar data=imgData.substr(22);
  w8 c2 ~8 F2 A5 ?9 n/ w4 s4 d
1 @0 |# q, |% d" x9 s: c　　第二种：就是替换；前面的部分为"";
5 u7 v, |* c# \. l6 s2 \
) \' T) S, @; r& jvar image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
7 k" T  E$ |' x! @* h9 u; K2 \
" ^3 @7 c. n5 p' S; U" P反正不管如何实现，能获取到图片流即可、

四、上传图片并解析

使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

前台部分代码：
, w& i0 r) P  V

1. <video  id="video">
   
2. <script>
   
3.     var flag = true;
   3 }1 |, `; O/ h  \0 l6 I9 t
4.     window.addEventListener("DOMContentLoaded", function () {
   8 ^4 p, k! E1 X. I. G% E( v# s, t
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   $ M; X% T( M5 t( J) k; e0 T  X
7.             canvas = document.createElement("canvas");
   
8.             canvas.width = 600;
   
9.             canvas.height = 600;
   + p- P+ u. `# t! V
10.             context = canvas.getContext("2d");
    
11.         } catch (e) { alert("not support canvas!"); return; }
    
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    & S" z0 K8 H. [# r
13. 
    & L* W. P4 D2 G8 G* L6 |4 \. |5 ]' R
14.         if (navigator.getUserMedia)
    
15.             navigator.getUserMedia(
    2 Y  p. H$ |( M5 o
16.                 { "video": true },
      b( a' u" m3 p5 _
17.                 function (stream) {
    9 A: I- Q8 u: j. [* o
18.                     if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
    % k  A7 ~# [1 ^1 v, G
19.                     else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
    . g8 J  h2 Y4 n/ ]! j! t0 S$ P6 s
20.                     video.play();
    2 @: W2 j$ ?# G9 W; r1 L& _3 J
21.                 },
    7 `% ~/ r6 F1 |# h$ |
22.                 function (error) {
    8 A: P/ i& T/ j. }) r
23.                     alert("请检查是否开启摄像头");
    7 @: r. F+ _# _( P3 `. s/ S
24.                     flag = false;
    
25.                 }
    3 f- v7 {( W: n8 V
26.             );
    
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    6 l1 Y$ I, E1 i6 G- x8 A" L8 R8 `
28.       
    / v& ?5 V7 Z2 y
29.         setInterval(function () {
    
30.                 if(!flag){
    
31.                         return;
    
32.                 }
    1 ]# r- S3 U  G; X# _
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
    & @7 T' p5 x' Z5 A  k
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    " `9 K& T" q. g, }- I% U$ o
35.             $.ajax({
    + J! B' F& B) Q; N% a
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    ' ~) [2 H' @9 v/ {9 v
37.                                 async : false,
    
38.                                 type : 'post',
    
39.                                 data : {
    
40.                                         'time' : (new Date()).toString(),
    
41.                                         'img' : image
    * `) s8 u: P- h5 M4 Z
42.                                 },
    
43.                                 success : function(result) {
    
44.                                           
    
45.                                 },
    
46.                     });
    
47.         }, 5000);
    
48.     }, false);
    
49. </script>

复制代码

后台部分代码：

1. /**
   8 r9 t4 w& Q( j* |) m0 ^
2.          * 解析二维码
   : s' Z- M* D6 o0 g+ P) V; v
3.          * @Author        张志朋
   
4.          * @return  String
   
5.          * @Date        2016年7月9日
   / B2 B9 ?3 V6 Y/ g9 H  e* w3 J
6.          * 更新日志
   
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   
9.          */
   
10.         public String decoderQRCode(){
    9 [+ y: a8 c$ }* d: e
11.                 try {
    
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    , {* c9 w) K; O+ `. b, n, E
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    
14.                         String imgName = sdf.format(new Date()) + ".png";
    
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    + l( _) F& y1 t4 ^- `
16.                         OutputStream out = new FileOutputStream(filePath);
    
17.                         QRCode.GenerateImage(img,out);//生成图片
    0 V: k4 B# g" I8 I# {/ B
18.                         message   = QRCode.decoderQRCode(filePath);
    7 q+ O( b2 U. K  f
19.                 } catch (Exception e) {
    4 |5 k: O3 Q) [8 o
20.                         e.printStackTrace();
    
21.                 }
    
22.                 return Action.SUCCESS;
    9 Z& H3 j7 S8 Z* h4 s
23.         }

复制代码

8 k) S1 W0 y0 |
: y2 G) P( C* z4 C, p调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！
6 Z  ?: S: P  S  I5 ~# L1 @: A

  ^( S( v! P& w8 [" b/ U) k% [2 U

+ d$ o) l5 N9 \. w
) n9 n) Q# I8 F* A有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。
; z; r. v( [& n2 V( X  s
附上演示地址：http://monitor.52itstyle.com/

) o" P" ]& y+ }5 _, A" f, ]项目源码下载地址
% o8 k( C( w; L; v1 f, v$ q

7 y* ?! r/ h) c8 d* k" c. j+ ?提取码：

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

4 u# E$ L- `% E4 W; A

xinyinbo

七总威武啊

welcome123

查看该项目的提取码

未名湖

查看该项目的提取码

gaodawei

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

xiaowei

好！　谢谢

xiaowei

好！　谢谢

远方的九月

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

浅时光

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

xpp123

学习一下 感谢分享