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

admin

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


项目使用环境以及工具：

Eclipse，JDK1.7，struts2，HTML5，Jquery,QRCode
9 y. ]  Z( V. b/ o' M

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

        这个功能不但手机端可以实现PC端也可以很好的实现，这个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。
8 ^3 o, s% z" j/ |
一、视频流
7 T- [( n5 [: i5 A; H9 J8 y
+ r+ x& @5 s0 J3 P6 t4 h' N& K3 [4 k       HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

二、拍照
! n3 o4 n  ]0 g+ ]  G4 Q) K5 Y/ v/ U- ?8 H
7 l, b: @6 p! a; n! U拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。
3 y% ]! W4 g( N8 p
: K* ~9 ]4 u/ ]2 j三、 获取图片
6 g5 Q2 l3 _+ b
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
* S' c6 r* T! e" d
var imgData=canvas.toDataURL(“image/png”);
; c+ d) e+ U4 O* Y
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：

+ e2 p" W* f8 l6 L# Evar data=imgData.substr(22);

/ Y, W' S" x1 t/ B　　第二种：就是替换；前面的部分为"";

( }: Z5 c- s( ^" x/ Hvar image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
. V$ u2 H. n4 N. u- f( v( c5 P
# m0 V7 U6 G* D! j9 J# w1 X7 j+ p( A7 T反正不管如何实现，能获取到图片流即可、

四、上传图片并解析
7 h9 C' I  H7 E3 R
; P$ s3 H) L& G/ a8 f; K  P使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。

8 K5 m% ]1 ~" Q* }前台部分代码：
0 ]  V1 E: J+ t) \2 v

1. <video  id="video">
   6 ~9 U' W) ~6 W0 ~  f! V
2. <script>
   
3.     var flag = true;
   
4.     window.addEventListener("DOMContentLoaded", function () {
     ?4 _2 G  E3 U. ]( g
5.         var video = document.getElementById("video"), canvas, context;
   8 x% s6 M% H4 k, ]% ?
6.         try {
   9 [6 `6 S4 l$ K8 g: M
7.             canvas = document.createElement("canvas");
   5 ^$ `; i$ e+ C  g& i3 I4 e' i
8.             canvas.width = 600;
   . k$ |, a" K6 Y% K9 d% l/ ]8 e+ l
9.             canvas.height = 600;
   ' @  _) ^) c' O! [
10.             context = canvas.getContext("2d");
    
11.         } catch (e) { alert("not support canvas!"); return; }
    4 x2 m; H" \2 y; z# M3 x
12.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    . m3 g! J# L: Q& D$ m9 H. t" M
13. 
    6 v% m- j4 L7 W/ b9 P0 n7 D, z
14.         if (navigator.getUserMedia)
    ! _: A/ U% L9 a; [1 q
15.             navigator.getUserMedia(
    1 {: x1 [8 n( v
16.                 { "video": true },
    2 y" P5 M$ `9 h' I: C0 m0 a- p
17.                 function (stream) {
    ' w8 q1 `0 ?6 R* W
18.                     if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
    % ~4 t% E9 G7 p& D; ~+ h
19.                     else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
    $ P( N5 o/ t2 I) P1 y2 C
20.                     video.play();
    7 \4 s, G+ u/ x6 e
21.                 },
    $ s- ^. S5 A) f5 \& w
22.                 function (error) {
    
23.                     alert("请检查是否开启摄像头");
    - Y9 _2 n/ Q8 C" ]0 k" K" m3 m
24.                     flag = false;
    
25.                 }
    8 |! g5 T2 i8 k9 V3 j) n" E& `
26.             );
    ' d6 E/ {8 C# D! K2 I: D
27.         else alert("Native device media streaming (getUserMedia) not supported in this browser");
    
28.       
    ( Z* a7 D8 x. u( e
29.         setInterval(function () {
    ! @* j1 k3 g( T* j5 g% y5 v
30.                 if(!flag){
    
31.                         return;
    ; Z  U2 {( g) N
32.                 }
    
33.             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
    8 g* N* m4 g1 v. a% X
34.                     var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    " ~9 K# o& A+ ~2 A# z# F# @
35.             $.ajax({
    
36.                                 url : 'qRCodeAction_decoderQRCode.action',
    
37.                                 async : false,
    ( _3 e1 ~: B4 X$ l# f3 Z
38.                                 type : 'post',
    
39.                                 data : {
    
40.                                         'time' : (new Date()).toString(),
    1 h+ j6 C3 W& h+ K! N' O
41.                                         'img' : image
    $ x& K* [6 H6 C3 S7 c- _! \+ j* m
42.                                 },
    % G. n; u# O9 m& {3 T3 m
43.                                 success : function(result) {
    4 O1 _: t$ P! H; p- N2 k( Y6 G
44.                                           
      V, H" V4 _9 W3 l4 d1 k
45.                                 },
      [8 u3 A" Z( O$ W$ ^
46.                     });
    5 [! ?& |; l: ?9 I
47.         }, 5000);
    : D" F# A8 H& O  x8 g" i
48.     }, false);
    5 t% A3 ^0 ~- h5 S2 P
49. </script>

复制代码

后台部分代码：
( N' F/ W  ?2 F

1. /**
   6 ?' [" w/ O9 x2 x9 |2 `# }- E
2.          * 解析二维码
   / U& S7 n3 n/ m' A; S8 x
3.          * @Author        张志朋
   
4.          * @return  String
   
5.          * @Date        2016年7月9日
   ' _  H% j' S* v6 U1 _" K
6.          * 更新日志
   1 F, S7 a1 {3 k; {$ }2 w
7.          * 2016年7月9日 张志朋  首次创建
   
8.          *
   
9.          */
   6 `  l) b+ Z* s3 s1 U. u2 W
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";
    ' z9 L, ?8 m- B
15.                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
    6 Z$ V' c7 Y+ k. e
16.                         OutputStream out = new FileOutputStream(filePath);
    , P0 I# A7 E; B6 u# ?* L# K* T  u
17.                         QRCode.GenerateImage(img,out);//生成图片
    
18.                         message   = QRCode.decoderQRCode(filePath);
    
19.                 } catch (Exception e) {
    
20.                         e.printStackTrace();
    
21.                 }
    
22.                 return Action.SUCCESS;
    
23.         }

复制代码

. N3 X- _2 g% w3 v: w调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描，PC不仅仅能访问摄像头，而且利用HTML5强大的画布技术，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！



8 R! f9 u# J8 l. g+ X% P$ E

/ y* a3 M, [6 L2 N" n) M有些手机可能无法调出摄像头，那就赶紧换手机吧，别out了。

, b4 h+ j5 ]. v6 V' e; G附上演示地址：http://monitor.52itstyle.com/
! g& d0 _$ b9 l9 c+ @: R
项目源码下载地址


1 t/ D- |1 f# s7 J0 I提取码：
; s0 ^/ B4 s  J

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

6 q8 H' ^* r/ N' t- K: A$ k
$ A2 f* C4 m; U2 M4 B9 n( X

xinyinbo

七总威武啊

welcome123

查看该项目的提取码

未名湖

查看该项目的提取码

gaodawei

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

xiaowei

好！　谢谢

xiaowei

好！　谢谢

远方的九月

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

浅时光

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

xpp123

学习一下 感谢分享