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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
再谈JavaScript线程
Jul 10 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
vue分页插件的使用方法
Dec 25 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
js操作select控件的几种方法
2010/06/02 Javascript
Js sort排序使用方法
2011/10/17 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python 迭代器与生成器实例详解
2017/05/18 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
护理专业推荐信
2013/11/07 职场文书
社会实践自我鉴定
2013/11/07 职场文书
群教班子对照检查材料
2014/08/26 职场文书
工作总结与自我评价
2014/09/18 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书