Vue+Java+Base64实现条码解析

前端部分（Vue + Vant）

引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)

import Vue from 'vue';

import { Uploader } from 'vant';

Vue.use(Uploader);

 使用Uploader上传组件

• 

  
            
      上传文件(s识别条码)
   
  

  View Code

• 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 = () => {
                 debugger
                // 指定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编码的图片保存到数组中，留待上传。
                debugger
                 alert(fileBase64)
                 console.log(fileBase64)
                //查询字典值
                this.$axios.post(url,{'fileBase64Code' :fileBase64})
                .then(function (response) {
                      func(response.data);
                    }.bind(this))
                .catch(function (error) {
                    Toast.file("识别失败，请重新上传条码！",3500);
                  })
              };
            },

  View Code

 

后端部分（Java ）

• 添加 zxing +  base64 依赖
  

  

  
  　　<dependency>
         <groupId>com.google.zxinggroupId>
         <artifactId>coreartifactId>
         <version>3.3.3version>
      dependency>
      <dependency>
          <groupId>com.google.zxinggroupId>
          <artifactId>javaseartifactId>
          <version>3.3.3version>
      dependency>
  
  
      
      
      <dependency>
          <groupId>net.ihardergroupId>
          <artifactId>base64artifactId>
          <version>2.3.8version>
      dependency>

  View Code

   

  
  

• @ResponseBody
  @LoginToken(required = false)
  @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> 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();        
                  rm.setSuccess(false);
                  rm.setMsg("解析失败");
              }
           return rm;
      }