Vue+Java+Base64實現條碼解析

Mr_Bingzi 發表於 2020-09-22

前端部分(Vue + Vant)

引入Vant、使用Vant中的Uploader元件上傳檔案(支援手機拍照)


import Vue from 'vue';

import { Uploader } from 'vant';

Vue.use(Uploader);

 使用Uploader上傳元件

  • Vue+Java+Base64實現條碼解析
    <van-uploader>
      <van-button icon="plus" type="primary" :after-read="afterRead">        
        上傳檔案(s識別條碼)
     </van-button>
    </van-uploader>
    View Code
  • js部分、檔案上傳完畢後會觸發 after-read 回撥函式,獲取到對應的 file 物件。

    Vue+Java+Base64實現條碼解析
    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 依賴

    Vue+Java+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>
    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<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(); rm.setSuccess(false); rm.setMsg("解析失敗"); } return rm; }