java实现电脑端扫描二维码

小蚂蚁

这篇文章主要为大家详细介绍了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"></canvas>
  <input id="snapbtn" type="button" value="拍照"/>
  <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持CodeAE代码之家。
原文链接：https://blog.csdn.net/u012883078/article/details/81067387?utm_source=blogxgwz0

[Java] java实现电脑端扫描二维码

相关帖子

Java8的Lambda和排序

用Java8 stream处理数据

Spring Security登陆流程讲解

qq安全扫描失败禁止下载该文件解决方法

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

小蚂蚁 LV3