电脑端扫描二维码（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")@ResponseBodypublic 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码设置给imgvar 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编码转换为BlobformData.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的转换为大于0var 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编码转换为BlobformData.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的转换为大于0var 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）相关推荐

使用电脑微信扫描二维码
使用电脑微信扫描二维码将二维码图片发送至文件传输助手在与文件传输助手的聊天界面点开图片,右键,点击识别图中二维码即可扫描完成.
Java 生成二维码 zxing生成二维码条形码服务端生成二维码 Java生成条形码
Java 生成二维码 zxing生成二维码条形码服务端生成二维码 Java生成条形码一.关于ZXing 1.ZXing是谷歌开源的支持二维码.条形码等图形的生成类库:支持生成.和解码功能. G ...
百度网盘PC端扫描二维码登录时无法加载二维码问题解决方法
问题: 今天在PC端扫描登录百度网盘时,二维码无法加载出来,具体情况如图: 解决方法: 1.打开IE浏览器 2.打开工具 3.打开Internet选项 4.打开高级选项,重置IE设置 5.点击确定,打 ...
移动端扫描二维码下载app
核心代码: <div id="testid"></div> <script type="text/javascript"> ...
【vue】移动端扫描二维码
参考链接: https://github.com/gruhn/vue-qrcode-reader https://blog.csdn.net/zhangtian_tian/article/detail ...
【JavaScript】移动端扫描二维码检测浏览器（微信、支付宝、Safari、其他浏览器）
// 检测客户端类型 // 注意:19年6月份iPad出了专门的操作系统iPadOS // 它的userAgent中不是iPad,也没有下文中的mobile,而是Macintosh,类似Mac.需要兼 ...
qq账号扫描二维码电脑无法登陆的问题
用手机版qq扫描没使用过的电脑端qq二维码,手机上显示已经在电脑登陆,但电脑端显示密码或账号错误,尝试修改几次密码然后手动输入密码和扫面二维码仍出现这个问题. 解决方法:在手机端qq 设置->手 ...
浅谈扫描二维码登录微信网页版与摇一摇传图的实现原理
前言:简单体验了下微信网页版通过二维码登录和摇一摇传图功能,从技术角度看,网上专家吹捧的 [隔空取物]其实并不神秘,我先简单分析一下. 1. 微信移动端扫描二维码登录(C-S-C模式) CSC模式为: ...
微信扫描二维码-电脑上网
展视网北京科技有限公司--cuidc 由于 wifi 成为人们生活中不可或缺的一部分,店家 wifi 免费上网的招数也就日益增多. 今天我们介绍一种破解<微信扫描二维码上网>的招数,此招数 ...

电脑端扫描二维码（java）

电脑端扫描二维码（java）相关推荐

最新文章

热门文章