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

前端部分（Vue + Vant）

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

import Vue from 'vue' 
import { Uploader } from 'vant' 
Vue.use(Uploader);

• 使用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;
      
 
      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 依赖

　　
    com.google.zxing
    core
    3.3.3
  
  
    com.google.zxing
    javase
    3.3.3
  


  
  
  
    net.iharder
    base64
    2.3.8
  

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 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实现条码解析的资料请关注考高分网其它相关文章！