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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
Javascript的无new构建实例详解
May 15 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
jquery编写日期选择器
Mar 16 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
介绍一下28个JS常用数组方法
May 06 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
用jquery来定位
2007/02/20 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Python入门篇之文件
2014/10/20 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python re.match()用法相关示例
2021/01/27 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
车贷收入证明范本
2014/01/09 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript