Vue+Java+Base64实现条码解析的示例

前端部分（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;
 }

来源：https://www.cnblogs.com/bingziweb/p/13713505.html