本文實例為大家分享了java實現電腦端掃描二維碼的具體代碼，供大家參考，具體內容如下
說明：js調去電腦攝像頭拍照，然后獲取圖片base64位編碼，再將base64為編碼轉為bolb，通過定時異步上傳到后臺，在后臺對圖片文件進行解碼，返回解碼結果到頁面，然后頁面重新加載結果（url）
第一種方式引入js
|
1
2
|
<script type="text/javascript" src="${basepath}js/jquery-1.9.min.js"></script><script type="text/javascript" src="${basepath}js/jquery.webcam.min.js"></script> |
第二種方式引入js
|
1
2
3
|
<script type="text/javascript" src="${basepath}js/jquery-1.9.min.js"></script><!-- 這個應該是需要的 --><script type="text/javascript" src="${basepath}js/jquery.qrcode.min.js"></script> |
后臺java代碼maven引入jar包
|
1
2
3
4
5
6
7
8
9
10
11
|
<dependency> <groupid>com.github.binarywang</groupid> <artifactid>qrcode-utils</artifactid> <version>1.1</version></dependency><dependency> <groupid>com.google.zxing</groupid> <artifactid>core</artifactid> <version>3.3.3</version></dependency> |
后臺代碼處理方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
public class ewmdescode { /** * 解析二維碼 * * @param input * 二維碼輸入流 */ public static final string parse(inputstream input) throws exception { reader reader = null; bufferedimage image; try { image = imageio.read(input); if (image == null) { throw new exception("cannot read image from inputstream."); } final luminancesource source = new bufferedimageluminancesource(image); final binarybitmap bitmap = new binarybitmap(new hybridbinarizer(source)); final map<decodehinttype, string> hints = new hashmap<decodehinttype, string>(); hints.put(decodehinttype.character_set, "utf-8"); // 解碼設置編碼方式為：utf-8， reader = new multiformatreader(); return reader.decode(bitmap, hints).gettext(); } catch (ioexception e) { e.printstacktrace(); throw new exception("parse qr code error: ", e); } catch (readerexception e) { e.printstacktrace(); throw new exception("parse qr code error: ", e); } } /** * 解析二維碼 * * @param url * 二維碼url */ public static final string parse(url url) throws exception { inputstream in = null; try { in = url.openstream(); return parse(in); } catch (ioexception e) { e.printstacktrace(); throw new exception("parse qr code error: ", e); } finally { ioutils.closequietly(in); } } /** * 解析二維碼 * * @param file * 二維碼圖片文件 */ public static final string parse(file file) throws exception { inputstream in = null; try { in = new bufferedinputstream(new fileinputstream(file)); return parse(in); } catch (filenotfoundexception e) { e.printstacktrace(); throw new exception("parse qr code error: ", e); } finally { ioutils.closequietly(in); } } /** * 解析二維碼 * * @param filepath * 二維碼圖片文件路徑 */ public static final string parse(string filepath) throws exception { inputstream in = null; try { in = new bufferedinputstream(new fileinputstream(filepath)); return parse(in); } catch (filenotfoundexception e) { e.printstacktrace(); throw new exception("parse qr code error: ", e); } finally { ioutils.closequietly(in); } } }@requestmapping("/decodeewm") @responsebody public string decodeewm(multipartfile ewmimg){ string parse = null; try { parse = ewmdescode.parse(ewmimg.getinputstream()); } catch (exception e) { //e.printstacktrace(); } string msg = "no"; if(stringutils.isnotblank(parse)){ return parse; } return msg; } |
前臺jsp代碼：
第一種處理方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
<%@ page contenttype="text/html; charset=utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><% string path = request.getcontextpath(); string basepath = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + path + "/resources/"; string urlpath = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + path + "/"; request.setattribute("path", path); request.setattribute("basepath", basepath); request.setattribute("urlpath", urlpath);%><!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>webcam</title> <style type="text/css"> #webcam { width: auto; height: auto; float: left; } #base64image { display: block; width: 320px; height: 240px; } </style> <!-- 基本的jquery引用，1.5版本以上 --> <script type="text/javascript" src="${basepath}js/jquery-1.9.min.js"></script> <!-- webcam插件引用 --> <script type="text/javascript" src="${basepath}js/jquery.webcam.min.js"></script> </head> <body> <div id="webcam"></div> <canvas id="canvas" width="320" height="240" style="display: none;"></canvas> <input id="snapbtn" type="button" value="拍照" style="display: none;"/> <img id="base64image" src='' /> <script type="text/javascript"> $(document).ready(function() { var pos = 0, ctx = null, image = []; var w = 320; var h = 240; jquery("#webcam").webcam({ width: 320, height: 240, mode: "callback", swffile: "${basepath}js/jscam_canvas_only.swf", // 這里引入swf文件，注意路徑 // swffile: "/jscam_canvas_only.swf", // 這里引入swf文件，注意路徑 ontick: function(remain) {}, onsave: function(data) { var col = data.split(";"); var img = image; for(var i = 0; i < 320; i++) { var tmp = parseint(col[i]); img.data[pos + 0] = (tmp >> 16) & 0xff; img.data[pos + 1] = (tmp >> 8) & 0xff; img.data[pos + 2] = tmp & 0xff; img.data[pos + 3] = 0xff; pos += 4; } if(pos >= 4 * 320 * 240) { // 將圖片顯示到canvas中 ctx.putimagedata(img, 0, 0); sumitimagefile(canvas.todataurl("image/png")); /* // 取得圖片的base64碼 var base64 = canvas.todataurl("image/png"); // 將圖片base64碼設置給img var base64image = document.getelementbyid('base64image'); base64image.setattribute('src', base64); */ pos = 0; } }, oncapture: function() { webcam.save(); // show a flash for example }, debug: function(type, string) { console.log('type:' + type + ',string:' + string); // write debug information to console.log() or a div }, onload: function() { // page load } }); window.addeventlistener("load", function() { var canvas = document.getelementbyid("canvas"); if(canvas.getcontext) { ctx = canvas.getcontext("2d"); ctx.clearrect(0, 0, 320, 240); var img = new image(); img.onload = function() { ctx.drawimage(img, 129, 89); } image = ctx.getimagedata(0, 0, 320, 240); } }, false); $('#snapbtn').on('click', function() { webcam.capture(); }); }); setinterval(function () { $("#snapbtn").click(); }, 1500); /** * @param base64codes * 圖片的base64編碼 */ function sumitimagefile(base64codes){ // var form=document.forms[0]; // var formdata = new formdata(form); //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接formdata無參數的構造函數 var formdata = new formdata(); //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接formdata無參數的構造函數 //convertbase64urltoblob函數是將base64編碼轉換為blob formdata.append("ewmimg",convertbase64urltoblob(base64codes)); //append函數的第一個參數是后臺獲取數據的參數名,和html標簽的input的name屬性功能相同 //ajax 提交form $.ajax({ url : '${urlpath}query/decodeewm', type : "post", data : formdata, datatype:"text", processdata : false, // 告訴jquery不要去處理發送的數據 contenttype : false, // 告訴jquery不要去設置content-type請求頭 success:function(data){ //alert(data); if(data != "no"){ window.location.href=data; } }, xhr:function(){ //在jquery函數中直接使用ajax的xmlhttprequest對象 var xhr = new xmlhttprequest(); xhr.upload.addeventlistener("progress", function(evt){ if (evt.lengthcomputable) { var percentcomplete = math.round(evt.loaded * 100 / evt.total); console.log("正在提交."+percentcomplete.tostring() + '%'); //在控制臺打印上傳進度 } }, false); return xhr; } }); } /** * 將以base64的圖片url數據轉換為blob * @param urldata * 用url方式表示的base64圖片數據 */ function convertbase64urltoblob(urldata){ var bytes=window.atob(urldata.split(',')[1]); //去掉url的頭，并轉換為byte //處理異常,將ascii碼小于0的轉換為大于0 var ab = new arraybuffer(bytes.length); var ia = new uint8array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charcodeat(i); } return new blob( [ab] , {type : 'image/png'}); } </script> </body> </html> |
第二種處理方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<%@ page contenttype="text/html; charset=utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><% string path = request.getcontextpath(); string basepath = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + path + "/resources/"; string urlpath = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + path + "/"; request.setattribute("path", path); request.setattribute("basepath", basepath); request.setattribute("urlpath", urlpath);%><!doctype html><html><head><title>qrcode</title></head><script type="text/javascript" src="${basepath}js/jquery-1.9.min.js"></script><!-- 這個應該是需要的 --><script type="text/javascript" src="${basepath}js/jquery.qrcode.min.js"></script><body><style>#video {display: block;margin:1em auto;width:280px;height:280px;}</style> <video id="video" autoplay></video><script> window.addeventlistener("domcontentloaded", function () { var video = document.getelementbyid("video"), canvas, context; try { canvas = document.createelement("canvas"); context = canvas.getcontext("2d"); } catch (e) { alert("not support canvas!"); return; } navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia; if (navigator.getusermedia){ navigator.getusermedia( { "video": true }, function (stream) { if (video.mozsrcobject !== undefined)video.mozsrcobject = stream; else video.src = ((window.url || window.webkiturl || window.mozurl || window.msurl) && window.url.createobjecturl(stream)) || stream; video.play(); }, function (error) { if(error.permission_denied){ alert("用戶拒絕了瀏覽器請求媒體的權限"); } //console.log("用戶拒絕了瀏覽器請求媒體的權限",error.code); if(error.not_supported_error){ alert("當前瀏覽器不支持拍照功能"); } //console.log("當前瀏覽器不支持拍照功能",error.code); if(error.mandatory_unsatisfied_error){ alert("指定的媒體類型未接收到媒體流"); } //console.log("指定的媒體類型未接收到媒體流",error.code); alert("video capture error: " + error.code); } ); //定時掃描 setinterval(function () { context.drawimage(video, 0, 0, canvas.width = video.videowidth, canvas.height = video.videoheight); sumitimagefile(canvas.todataurl()); }, 1500); } else { alert("掃描出錯，換種方式試試！"); } }, false); /** * @param base64codes * 圖片的base64編碼 */ function sumitimagefile(base64codes){ // var form=document.forms[0]; // var formdata = new formdata(form); //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接formdata無參數的構造函數 var formdata = new formdata(); //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接formdata無參數的構造函數 //convertbase64urltoblob函數是將base64編碼轉換為blob formdata.append("ewmimg",convertbase64urltoblob(base64codes)); //append函數的第一個參數是后臺獲取數據的參數名,和html標簽的input的name屬性功能相同 //ajax 提交form $.ajax({ url : '${urlpath}query/decodeewm', type : "post", data : formdata, datatype:"text", processdata : false, // 告訴jquery不要去處理發送的數據 contenttype : false, // 告訴jquery不要去設置content-type請求頭 success:function(data){ //alert(data); if(data != "no"){ window.location.href=data; } }, xhr:function(){ //在jquery函數中直接使用ajax的xmlhttprequest對象 var xhr = new xmlhttprequest(); xhr.upload.addeventlistener("progress", function(evt){ if (evt.lengthcomputable) { var percentcomplete = math.round(evt.loaded * 100 / evt.total); console.log("正在提交."+percentcomplete.tostring() + '%'); //在控制臺打印上傳進度 } }, false); return xhr; } }); } /** * 將以base64的圖片url數據轉換為blob * @param urldata * 用url方式表示的base64圖片數據 */ function convertbase64urltoblob(urldata){ var bytes=window.atob(urldata.split(',')[1]); //去掉url的頭，并轉換為byte //處理異常,將ascii碼小于0的轉換為大于0 var ab = new arraybuffer(bytes.length); var ia = new uint8array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charcodeat(i); } return new blob( [ab] , {type : 'image/png'}); } </script> </body> </html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/u012883078/article/details/81067387?utm_source=blogxgwz0
