java实现电脑端扫描二维码
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
Java二维码登录流程实现代码(包含短地址生成，含部分代码)
近年来,二维码的使用越来越风生水起,笔者最近手头也遇到了一个需要使用二维码扫码登录网站的活,所以研究了一下这一套机制,并用代码实现了整个流程,接下来就和大家聊聊二维码登录及的那些事儿. 二维码原理 二维码是微信搞起来的,当年微信扫码二维码登录网页微信的时候,感觉很神奇,然而,我们了解了它的原理,也就没那么神奇了.二维码实际上就是通过黑白的点阵包含了一个url请求信息.端上扫码,请求url,做对应的操作. 一般性扫码操作的原理 微信登录.支付宝扫码支付都是这个原理: 1. 请求二维码 桌面端向服务
-
java生成彩色附logo二维码
java生成二维码有很多开发的jar包如zxing是谷歌开发的,这里的话我使用zxing的开发包来实现的.我们在很多项目中需要动态生成二维码,来提供给用户,这样让更多人能够很好的通过二维码来体验自己的应用. 下面贴出代码,已经测试通过,大家可以直接复制代码使用: 最后实现结果: java生成二维码 代码如下: import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.geom
-
用JAVA 设计生成二维码详细教程
教你一步一步用 java 设计生成二维码 在物联网的时代,二维码是个很重要的东西了,现在无论什么东西都要搞个二维码标志,唯恐落伍,就差人没有用二维码识别了.也许有一天生分证或者户口本都会用二维码识别了.今天心血来潮,看见别人都为自己的博客添加了二维码,我也想搞一个测试一下. 主要用来实现两点: 1. 生成任意文字的二维码. 2. 在二维码的中间加入图像. 一.准备工作. 准备QR二维码3.0 版本的core包和一张jpg图片. 下载QR二维码包. 首先得下载 zxing.jar 包, 我这里用的
-
Java中基于maven实现zxing二维码功能
maven所需jar <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.0.0</version> </dependency> <dependency> <groupId>com.google.zxing</groupId> <artifac
-
利用java生成二维码工具类示例代码
二维码介绍 二维条形码最早发明于日本,它是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的,在代码编制上巧妙地利用构成计算机内部逻辑基础的"0"."1"比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理. 如下为java生成二维码工具类,可以选择生成文件,或者直接在页面生成,话不多说了,来一起看看详细的示例代码吧. 示例代码 import java.aw
-
java实现二维码生成的几个方法（推荐）
java实现二维码生成的几个方法,具体如下: 1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/downloads/28391/qrcode.zip 这个是日本人写的,生成的是我们常见的方形的二维码 可以用中文 如:5677777ghjjjjj 2: 使用BarCode4j生成条形码和二维码 BarCode4j网址:http://sourcefor
-
java 二维码的生成与解析示例代码
二维码,是一种采用黑白相间的平面几何图形通过相应的编码算法来记录文字.图片.网址等信息的条码图片.如下图 二维码的特点: 1. 高密度编码,信息容量大 可容纳多达1850个大写字母或2710个数字或1108个字节,或500多个汉字,比普通条码信息容量约高几十倍. 2. 编码范围广 该条码可以把图片.声音.文字.签字.指纹等可以数字化的信息进行编码,用条码表示出来:可以表示多种语言文字:可表示图像数据. 3. 容错能力强,具有纠错功能 这使得二维条码因穿孔.污损等引起局部损坏时,照样可以正确
-
java中ZXing 生成、解析二维码图片的小示例
概述 ZXing 是一个开源 Java 类库用于解析多种格式的 1D/2D 条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME.J2SE和Android. 官网:ZXing github仓库 实战 本例演示如何在一个非 android 的 Java 项目中使用 ZXing 来生成.解析二维码图片. 安装 maven项目只需引入依赖: <dependency> <groupId>com.google.zxing
-
利用Java生成带有文字的二维码
介绍 主要使用了goole的zxing包,下面给出了示例代码,很方便大家的理解和学习,代码都属于初步框架,功能有了,需要根据实际使用情况完善优化. 第一步.maven导入zxing <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.2.1</version> </dependency>
-
java微信扫描公众号二维码实现登陆功能
本文实例为大家分享了java微信扫描公众号二维码实现登陆的具体代码,供大家参考,具体内容如下 前提条件: 1.微信公众平台为服务号, 2.服务号实现了账号绑定功能,即将open_id 与业务系统中的用户名有对应关系 具体实现原理: 1.用户访问业务系统登陆页时,调用二维码接口,获得二维码的ticketid,同时将sessionid,ticketid和二维码的seceneid保存 2.返回登陆页时,根据ticketid获得微信二维码 3.页面通过ajax发送请求,判断是否已经扫描成功. 4.公众平