Vue+Java+Base64实现条码解析的示例


Posted in Javascript onSeptember 23, 2020

前端部分(Vue + Vant)

  • 引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
import Vue from 'vue' 
import { Uploader } from 'vant' 
Vue.use(Uploader);
  • 使用Uploader上传组件
<van-uploader>
  <van-button icon="plus" type="primary" :after-read="afterRead">    
   上传文件(识别条码)
 </van-button>
 </van-uploader>
  • js部分、文件上传完毕后会触发 after-read 回调函数,获取到对应的 file 对象。
afterRead(file) {
  var self = this;
  //调用上传回调函数 - upload
  this.upLoad(this.$baseUrl + "upload/uploadParsing", file,
  function (response) {
    if( response.msg.length >0){
     console.log(response.msg)
    }else{
      Toast.fail('识别失败,请重新上传条码!',3500)
    }
   });  

 },
 
 upLoad(url, file, func) {
    var fileBase64 =''
    // 创建Canvas对象(画布)
    debugger
    let canvas = document.createElement("canvas");
    // 获取对应的CanvasRenderingContext2D对象(画笔)
    let context = canvas.getContext("2d");
    // 创建新的图片对象
    let img = new Image();
    // 指定图片的DataURL(图片的base64编码数据)
    img.src = file.content;
    // 监听浏览器加载图片完成,然后进行进行绘制
    img.onload = () => {
      // 指定canvas画布大小,该大小为最后生成图片的大小
      canvas.width = 400;
      canvas.height = 300;
      /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点,400,300是将图片按给定的像素进行缩小。
      如果不指定缩小的像素图片将以图片原始大小进行绘制,图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片,最后的图片就是张局部图。*/
 
      context.drawImage(img, 0, 0, 400, 300);
      // 将绘制完成的图片重新转化为base64编码,file.file.type为图片类型,0.92为默认压缩质量
      file.content = canvas.toDataURL(file.file.type, 0.92);
      fileBase64 = file.content
      // 最后将base64编码的图片保存到数组中,留待上传。43      console.log(fileBase64)
      //查询字典值
      this.$axios.post(url,{'fileBase64Code' :fileBase64})
      .then(function (response) {
       func(response.data);
      }.bind(this))
      .catch(function (error) {
        Toast.file("识别失败,请重新上传条码!",3500);
      })
   };
 },

后端部分(Java )

添加 zxing + base64 依赖

<!-- 解析二维码 -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.3.3</version>
  </dependency>
  <dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.3.3</version>
  </dependency>


  <!-- Base64 -->
  <!-- https://mvnrepository.com/artifact/net.iharder/base64 -->
  <dependency>
    <groupId>net.iharder</groupId>
    <artifactId>base64</artifactId>
    <version>2.3.8</version>
  </dependency>

Controller

@ResponseBody

@RequestMapping(value = "/uploadParsing", method = RequestMethod.POST)

public ResponseMessage uploadParsing(@RequestBody imgUploadMessage uploadFile){
    ResponseMessage rm=new ResponseMessage();
    //解析Base64编码之后 读取条
    try {
      String imgStr = uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf(",")+1);
      Decoder decoder = Base64.getDecoder();
      byte[] base = decoder.decode(imgStr);
      for (int i = 0; i < base.length; ++i) {
        if (base[i] < 0) {
          base[i] += 256;
        }
      }
       ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(base);
       BufferedImage read = ImageIO.read( byteArrayInputStream);
        if (null==read) {
          rm.setMsg("解析失败");
          rm.setSuccess(false);
          return rm;
        }
        BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(read);
        BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));
        Map<DecodeHintType,Object> hints=new HashMap<>();
        hints.put(DecodeHintType.CHARACTER_SET,"GBK");
        hints.put(DecodeHintType.PURE_BARCODE,Boolean.TRUE);
        hints.put(DecodeHintType.TRY_HARDER,Boolean.TRUE);
  
        Result decode = new MultiFormatReader().decode(bitmap, hints);
        log.debug("条形码的内容是:" + decode.getText());
        rm.setMsg(decode.getText());
       
      } catch (Exception e) {
        e.printStackTrace();
        log.debug("解析失败:",e);
        rm.setSuccess(false);
        rm.setMsg("解析失败");
      }
     return rm;
  }

以上就是Vue+Java+Base64实现条码解析的示例的详细内容,更多关于Vue+Java+Base64实现条码解析的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
js实现三角形粒子运动
Sep 22 #Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 #Javascript
You might like
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
网页常用特效代码整理
2006/06/23 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
require.js中的define函数详解
2017/07/10 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python魔法方法详解
2019/02/13 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
英语自荐信常用语句
2013/12/13 职场文书
任命书模板
2014/06/04 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP