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

时间:2022-09-18 22:32:07

前端部分(Vue + Vant)

  • 引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
?
1
2
3
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
  • 使用Uploader上传组件
?
1
2
3
4
5
<van-uploader>
 <van-button icon="plus" type="primary" :after-read="afterRead">   
  上传文件(识别条码)
</van-button>
</van-uploader>
  • js部分、文件上传完毕后会触发 after-read 回调函数,获取到对应的 file 对象。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 依赖

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 解析二维码 -->
  <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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@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实现条码解析的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/bingziweb/p/13713505.html