java实现电脑端扫描二维码
程序员文章站
2024-03-06 17:31:14
本文实例为大家分享了java实现电脑端扫描二维码的具体代码，供大家参考，具体内容如下
说明：js调去电脑摄像头拍照，然后获取图片base64位编码，再将base64为编码...
本文实例为大家分享了java实现电脑端扫描二维码的具体代码，供大家参考，具体内容如下
说明：js调去电脑摄像头拍照，然后获取图片base64位编码，再将base64为编码转为bolb，通过定时异步上传到后台，在后台对图片文件进行解码，返回解码结果到页面，然后页面重新加载结果（url）
第一种方式引入js
<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
<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包
<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>
后台代码处理方式：
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代码：
第一种处理方式：
<%@ 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>
第二种处理方式：
<%@ 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 多数据源 博客分类： java