本文实例为大家分享了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
