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; }