电脑端扫描二维码（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）

相关文章

Proteus使用笔记

使用电脑微信扫描二维码

微信扫描二维码-电脑上网

有关于PC的扫码登录

pc端实现微信扫码登录

h5扫描pc端二维码登录

网站用微信扫描二维码登录

开放平台–扫描微信二维码登录