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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
Javascript 强制类型转换函数
May 17 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 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
杏林同学录(六)
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
js继承的实现代码
2010/08/05 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年评职称工作总结
2014/11/20 职场文书
新生入学欢迎词
2015/01/26 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书