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调用asp.net 页面后台的实现代码
Apr 27 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
小程序清理本地缓存的方法
Aug 17 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
详解vue高级特性
Jun 09 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
JavaScript canvas实现雨滴特效
Jan 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP7新增函数
2021/03/09 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
js实现文字滚动效果
2016/03/03 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Django如何批量创建Model
2020/09/01 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
2014年大学教师工作总结
2014/12/02 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
中秋节随笔
2015/08/15 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
python基础之文件操作
2021/10/24 Python
MySQL 开窗函数
2022/02/15 MySQL