TA的每日心情 | 衰 2021-2-2 11:21 |
---|
签到天数: 36 天 [LV.5]常住居民I
|
最近一个需求就是做一个二维码扫描的功能,但是又不想使用安卓APP的方式实现,百度了一下貌似HTML5可以实现。, S5 u h+ V4 D( w0 C- _
- ?; G! N2 d$ S% F$ J0 I3 i
: k, J. W" p0 p4 O$ S, b V项目使用环境以及工具:+ S- e0 C* [$ K& A8 \
+ }2 I2 C y# Y" t6 ^6 b0 J
Eclipse,JDK1.7,struts2,HTML5,Jquery,QRCode
, p X2 |' c3 f% W" H3 b9 a) dHTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器。这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。 : f: X1 g. @" w6 {+ v: Y; C/ k
这个功能不但手机端可以实现PC端也可以很好的实现,这个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。$ x2 T8 U v# Y) { a; O
# P+ O7 N/ O2 z9 I! H3 u$ p
一、视频流
. {# N7 Q+ r0 j3 ~9 r
- S6 \! I0 j, A: v4 O4 a1 U3 Y p HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用 getUserMedia (请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签,并将从摄像头获得的视频作为这个标签的输入来源。
) D" C( ~6 I9 y' n1 O1 ^$ R- V! n1 y/ y# s0 e
二、拍照
* B% |3 @: S% o
; A& b' i2 c* t5 J4 v+ L拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。7 q$ K8 N$ Z2 i
8 {( R8 k+ O ^% }# ?: K! X8 W% G
三、 获取图片
" Z: L) X2 @2 U5 f. z$ D3 K9 t8 \. E4 |
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。5 O" b5 `! t# a
I7 Q c$ M# ^2 P' xvar imgData=canvas.toDataURL(“image/png”);
$ [, c& C9 y+ C7 P& M9 E
. m% `$ y% S4 P0 V2 j0 b这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器接收的图像数据应该是这部分,我们可以用两种办法来获取。# n8 b# B; w( q$ N& Z1 h4 @
第一种:是在前端截取22位以后的字符串作为图像数据,例如:+ q$ V3 X& ~$ ~$ b( ~$ q6 R
' A8 E8 B6 y9 @) T& n( l; H0 }
var data=imgData.substr(22);3 J1 K0 U3 g/ k4 w' b
7 ~/ w7 w. C) O- u
第二种:就是替换;前面的部分为"";* ~ A4 m0 z9 J$ q+ x2 O: _
: H- H2 [1 q; u' N
var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");( C" l& x0 A+ ?( N8 L. K
2 q4 `. M% O# }- m3 y/ f9 ?+ C% e反正不管如何实现,能获取到图片流即可、
p8 }% U+ U& [" K Q! b' |6 X1 u! Y5 L
四、上传图片并解析
! ?& S }) A5 U2 b4 M" P2 n4 W0 X) d2 U; i$ ~
使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。. o% m4 T( I$ S; Y7 w
a$ l0 q' R @3 u- Q
前台部分代码:% v5 b7 z% E# D) O1 H+ T( q" C
- <video id="video">
, g) d1 j: c) X& [* D - <script>, M$ ]$ J6 }: G% x" b
- var flag = true;' e ~; ?9 o+ V+ V
- window.addEventListener("DOMContentLoaded", function () {
: \. f" |9 n: I - var video = document.getElementById("video"), canvas, context;
( T. Y, @5 a. W* S; I# S% ]1 n5 l: R - try {
9 l4 o# G" Q6 ?: A: P: T - canvas = document.createElement("canvas");
( W% _& k, ]# ? T - canvas.width = 600;
/ h1 w0 l" ^; d% @6 U; c - canvas.height = 600;. {/ _) K: e4 G$ \
- context = canvas.getContext("2d");" X/ e' n: z' _7 ?1 o
- } catch (e) { alert("not support canvas!"); return; }
: Q5 |* E K* O- ]4 y - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
; s9 H4 V' }( ~/ R& d1 t
/ |( K. y% |: ~" w2 s) [6 r7 Z+ e- if (navigator.getUserMedia), F+ u) k# q2 o6 F) G
- navigator.getUserMedia(, x' z0 J; V- b+ z8 ?
- { "video": true },
7 t1 k* z1 G- B- t) ` - function (stream) {3 j/ Y+ f+ c1 c& P8 u
- if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;& Z* I6 X4 ]5 {- c
- else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;
' k6 s/ v% H" r' H) N - video.play();
4 ^2 |+ I8 {" {- v - },
u' F+ R' o' w - function (error) {
: }7 o! u4 X- s. M0 T - alert("请检查是否开启摄像头");
( }4 v# n: i6 G* o0 B# C' u% S - flag = false;
- g+ Z @1 r! @$ S0 q7 U; N - }
" Z7 d" ~6 K1 ]6 j P3 w \ - );
% @6 i- Y% V+ }$ ~ @& v - else alert("Native device media streaming (getUserMedia) not supported in this browser");. A0 M4 J* z! c7 O) `) T
- ; o% @+ `5 `! U, s6 B9 ~9 U- t7 A
- setInterval(function () {
: @! Y" A M, C: X - if(!flag){5 w, T' o" J/ W# N
- return;
' `, L- V. ]! P7 ~2 y# ]# B - }
* A2 K+ ?. v: n* S - context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);. H3 [" u8 Z, }# e9 z) R' p
- var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", ""); ) @1 [ h3 ?% _4 o$ @; i" _/ k: S
- $.ajax({) p. b0 p& U& ^: M! x
- url : 'qRCodeAction_decoderQRCode.action',! H) M' j( E6 X+ S$ r% j4 s
- async : false,
9 I. f) \8 b* b' s - type : 'post',
$ N, x) g# x$ S- j0 J; R - data : {
$ \7 h8 D0 a1 r" x7 B - 'time' : (new Date()).toString(),7 ?& _& S3 Q1 E# V
- 'img' : image- {: W7 T. h3 e: f, ^$ N4 k0 A
- },
" A; s) A7 P! b. E m2 N1 J& G - success : function(result) {# X; [5 j! t9 Q4 n# C: u0 I
- $ C- D1 G+ I8 ~% v3 b% Z5 n
- },
9 A/ B- u& ]; T* S - });& ~5 {0 W. A9 h- G5 B; d
- }, 5000);0 {5 t; B* E6 w$ V9 g+ T) i$ t
- }, false);7 _% S% W8 [: [$ j' l
- </script>
复制代码
8 j9 m0 J0 t0 x7 K后台部分代码:: d0 _1 @5 O& D K1 y
- /**5 g1 t' l+ g! O/ H" e0 ~' e
- * 解析二维码
5 y2 N0 E( y$ t6 w3 B# X0 v* K - * @Author 张志朋- ?& E7 W I; ]% s- I5 G
- * @return String
6 t" z/ Q3 A% c) _8 ?5 t - * @Date 2016年7月9日& ~! e( ~2 a0 `' P) Y
- * 更新日志
! h7 G2 {7 b( x& T0 l* ]; y - * 2016年7月9日 张志朋 首次创建
1 V/ Z1 ~- E3 z F- G - *+ R% _! c, A. e5 l. A# ]
- */
, r) e* t8 k6 T( e/ R! ?( @ O - public String decoderQRCode(){" N; q/ N6 }* v
- try {
% k7 J) w6 A( ^$ A$ [: [ - String realpath = ServletActionContext.getServletContext().getRealPath("/file");) q, m; X+ k! h, N
- SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");( z4 _5 ]' T7 D7 R4 l* J6 w
- String imgName = sdf.format(new Date()) + ".png";
# X" N5 Y% K( C& T: s8 t5 t2 x - String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;1 s2 S1 V- ~4 q/ r, m
- OutputStream out = new FileOutputStream(filePath);0 p s; U. r- i9 c
- QRCode.GenerateImage(img,out);//生成图片
0 i! d& E2 B. _ - message = QRCode.decoderQRCode(filePath);
- }( ~4 f5 {4 C0 G% z - } catch (Exception e) {! I& |. M @( `
- e.printStackTrace();. o" x! c" A9 N
- }
& |2 Y+ w" q1 }3 P& } - return Action.SUCCESS;
' p1 b- C3 j0 d8 E1 _ - }
复制代码
5 @( G7 Q% m) [" C5 m, T) P% Q4 y* @& t; u
调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描,PC不仅仅能访问摄像头,而且利用HTML5强大的画布技术,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!6 e( U5 B5 W( T/ ~/ W
q: i# l$ g- P/ l
x' G& J6 X% [
; Z8 G! y- w- @6 X5 O7 U& P
" d/ S, ]0 |) S
; j5 J# y. z% }( o& k有些手机可能无法调出摄像头,那就赶紧换手机吧,别out了。' J T! C: i! s9 e+ q2 X' S
& q( P% x2 K% t: T* H. [; @4 z附上演示地址:http://monitor.52itstyle.com/
( u- J" B ^# a. v
& t8 j# Q4 O9 C( @1 T项目源码下载地址2 O& q4 k) h" I& N+ W0 g) M2 g
! h1 d$ |; F2 k4 W/ ~$ G
" @4 ]4 l3 X3 [. u7 H& J提取码:% E. Q: O+ {, T ^4 a
P5 F" @8 H' _) z
. t/ E2 F+ x/ Y5 ]
) w4 s* v- G' [2 O1 @
! m/ c2 k3 ?6 @
|
|