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

admin

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


项目使用环境以及工具：
, t6 v- B  I: G6 W/ a
: l, z' @; c/ e' w6 xEclipse，JDK1.7，struts2，HTML5，Jquery,QRCode

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

        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。
3 o( L2 a8 n4 ^
一、视频流
% s+ U; q3 H  z7 U' M
  F& }8 s1 Y8 [# Z. E- j/ {       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
- G4 {2 A' o  [& |2 N2 x" x
* e8 B# B6 W+ q0 M9 r6 T* ]+ h二、拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。
6 {" L% J6 M# f  F) x; c7 P
三、 获取图片
4 K" c. Z! K3 i/ _& A; r& d, x
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
0 L$ R, q9 W" M# v
) |6 r" }2 o+ V/ R, Dvar imgData=canvas.toDataURL(“image/png”);
5 t+ I# G; C7 O! l8 d. K- x
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
5 w3 h# ?( i6 [" ^0 ^' v　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
( ^/ y. V* @9 a0 ]9 |, ?" v
var data=imgData.substr(22);
# T8 r4 e! |0 S: n
　　第二种：就是替换；前面的部分为"";

var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");

% P( c9 r  X; T9 U7 Z  O反正不管如何实现，能获取到图片流即可、

5 B( h' N& @; a; m8 t1 E四、上传图片并解析

/ ?# H2 K( B9 Z6 _使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

前台部分代码：

1. <video  id="video">
   
2. <script>
   
3.     var flag = true;
   $ g/ d! i- o4 s
4.     window.addEventListener("DOMContentLoaded", function () {
   
5.         var video = document.getElementById("video"), canvas, context;
   
6.         try {
   : i  ~7 J8 R) K6 U' r' G* M
7.             canvas = document.createElement("canvas");
   " F1 ~1 E2 t$ p, V5 M) |
8.             canvas.width = 600;
   
9.             canvas.height = 600;
   
10.             context = canvas.getContext("2d");
    
11.         } catch (e) { alert("not support canvas!"); return; }
    * o- G" k* b* A" K1 {1 J( s
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
13. 
    - @4 m8 e: a, y. ^. d7 y2 ]
14.         if (navigator.getUserMedia)
    
15.             navigator.getUserMedia(
    + X  L0 r5 Z: @* Y- k! Z
16.                 { "video": true },
    4 d$ y& G7 B" q! }9 l3 ~
17.                 function (stream) {
    $ @3 u, a0 x$ }- ]/ @
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();
    " E# m' o+ P- _: I. C" p
21.                 },
    
22.                 function (error) {
    ' F- m( a' O* i7 E' R7 z  {! H& F! O& k
23.                     alert("请检查是否开启摄像头");
    
24.                     flag = false;
    
25.                 }
    % n: ]7 _; U7 t9 l2 c; W
26.             );
    * Z* U* t3 i$ `6 k! k2 t/ K. S
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    * j, ^2 K( G1 X0 A" f/ Q/ ~3 L
28.       
    0 F+ W% G8 ~- H- }2 x
29.         setInterval(function () {
    # G: z+ }2 E0 M; \0 v7 K4 I
30.                 if(!flag){
    . ~! \/ f( b4 {, r; n/ v
31.                         return;
    
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({
    & v# g1 s% r7 j; _0 B$ U6 V; {
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    
37.                                 async : false,
    " g! N  Y- S- E4 ~- a9 m
38.                                 type : 'post',
    6 F& S; H& p& o( g; M, S
39.                                 data : {
    3 g9 _' M. B  n% Q
40.                                         'time' : (new Date()).toString(),
    ' Y+ k6 X; O% ^& a& V9 d8 ^
41.                                         'img' : image
    ' Q6 t/ @2 {7 _* j; H  H8 u
42.                                 },
    
43.                                 success : function(result) {
    
44.                                           
    
45.                                 },
    4 q7 X+ L+ W# N3 T, D) N
46.                     });
    ! |. T0 q$ h/ O9 E
47.         }, 5000);
    
48.     }, false);
    4 U- N8 y7 |. j) K6 e0 |4 x* [
49. </script>

复制代码

- ]* e' E1 x, \1 B5 d0 Z! D6 Z8 E$ p后台部分代码：

1. /**
   
2.          * 解析二维码
   " C0 c! B' Q7 S3 M; G$ `0 V: H
3.          * @Author        张志朋
   0 A1 |# K3 Q0 I
4.          * @return  String
   
5.          * @Date        2016年7月9日
   
6.          * 更新日志
   
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   
9.          */
   
10.         public String decoderQRCode(){
    - [# @: o% T0 F( R9 \, u6 f
11.                 try {
    3 |' ~! p* Y: ]) `, s/ P( I3 M  E5 x
12.                         String realpath = ServletActionContext.getServletContext().getRealPath("/file");
    
13.                         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
    / r& f" r+ d9 w6 s" k
14.                         String imgName = sdf.format(new Date()) + ".png";
    4 @9 [7 ?% t: D2 d( d
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    2 j9 _% A# l1 t8 F+ B5 Q
16.                         OutputStream out = new FileOutputStream(filePath);
    9 T& u4 s7 l$ t& b! [
17.                         QRCode.GenerateImage(img,out);//生成图片
    
18.                         message   = QRCode.decoderQRCode(filePath);
    
19.                 } catch (Exception e) {
    
20.                         e.printStackTrace();
    / k* b, q7 b! A
21.                 }
    ) s& U; O) }+ Y( m8 h, e- v
22.                 return Action.SUCCESS;
    
23.         }

复制代码

; w3 x6 [" E8 u9 r7 r6 x5 L
. O3 v2 n' ]7 l调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！




& G. a: c6 u, m9 _# P; u
  w/ S7 u' u' Y4 w9 U有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。
& B) i" Q- s' L; B. u
! ], |  D5 P5 }. m; S0 y附上演示地址：http://monitor.52itstyle.com/

项目源码下载地址

  J4 y0 m  Z& M) V# K, c- _2 u
. Q( ^9 {, Y& c) q提取码：

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

7 L- B: B8 A4 D7 M$ o

xinyinbo

七总威武啊

welcome123

查看该项目的提取码

未名湖

查看该项目的提取码

gaodawei

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

xiaowei

好！　谢谢

xiaowei

好！　谢谢

远方的九月

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

浅时光

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

xpp123

学习一下 感谢分享