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 创建对象和构造类实现代码
Jul 30 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
jquery实现下载图片功能
Jul 18 jQuery
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
php实例化一个类的具体方法
2019/09/19 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
js实现简单抽奖功能
2020/11/24 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
使用Python实现批量ping操作方法
2020/05/06 Python
意大利在线药房:Saninforma
2021/02/11 全球购物
房地产广告策划方案
2014/05/15 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
安全演讲稿开场白
2014/08/25 职场文书
组工干部演讲稿
2014/09/02 职场文书
村官个人总结范文
2015/03/03 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle