快捷導(dǎo)航

Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例

更新時(shí)間：2020年09月23日 08:56:27 作者：Mr_Bingzi

這篇文章主要介紹了Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例，幫助大家實(shí)現(xiàn)條碼解析，感興趣的朋友可以了解下

前端部分（Vue + Vant）

引入Vant、使用Vant中的Uploader組件上傳文件(支持手機(jī)拍照)

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

使用Uploader上傳組件

 <van-uploader>
  <van-button icon="plus" type="primary" :after-read="afterRead">    
   上傳文件(識(shí)別條碼)
 </van-button>
 </van-uploader>

js部分、文件上傳完畢后會(huì)觸發(fā) after-read 回調(diào)函數(shù)，獲取到對(duì)應(yīng)的 file 對(duì)象。

afterRead(file) {
  var self = this;
  //調(diào)用上傳回調(diào)函數(shù) - upload
  this.upLoad(this.$baseUrl + "upload/uploadParsing", file,
  function (response) {
    if( response.msg.length >0){
     console.log(response.msg)
    }else{
      Toast.fail('識(shí)別失敗，請(qǐng)重新上傳條碼！',3500)
    }
   });  

 },
 
 upLoad(url, file, func) {
    var fileBase64 =''
    // 創(chuàng)建Canvas對(duì)象(畫(huà)布)
    debugger
    let canvas = document.createElement("canvas");
    // 獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
    let context = canvas.getContext("2d");
    // 創(chuàng)建新的圖片對(duì)象
    let img = new Image();
    // 指定圖片的DataURL(圖片的base64編碼數(shù)據(jù))
    img.src = file.content;
    // 監(jiān)聽(tīng)瀏覽器加載圖片完成，然后進(jìn)行進(jìn)行繪制
    img.onload = () => {
      // 指定canvas畫(huà)布大小，該大小為最后生成圖片的大小
      canvas.width = 400;
      canvas.height = 300;
      /* drawImage畫(huà)布繪制的方法。(0,0)表示以Canvas畫(huà)布左上角為起點(diǎn)，400，300是將圖片按給定的像素進(jìn)行縮小。
      如果不指定縮小的像素圖片將以圖片原始大小進(jìn)行繪制，圖片像素如果大于畫(huà)布將會(huì)從左上角開(kāi)始按畫(huà)布大小部分繪制圖片，最后的圖片就是張局部圖。*/
 
      context.drawImage(img, 0, 0, 400, 300);
      // 將繪制完成的圖片重新轉(zhuǎn)化為base64編碼，file.file.type為圖片類(lèi)型，0.92為默認(rèn)壓縮質(zhì)量
      file.content = canvas.toDataURL(file.file.type, 0.92);
      fileBase64 = file.content
      // 最后將base64編碼的圖片保存到數(shù)組中，留待上傳。43      console.log(fileBase64)
      //查詢(xún)字典值
      this.$axios.post(url,{'fileBase64Code' :fileBase64})
      .then(function (response) {
       func(response.data);
      }.bind(this))
      .catch(function (error) {
        Toast.file("識(shí)別失敗，請(qǐng)重新上傳條碼！",3500);
      })
   };
 },

后端部分（Java ）

添加 zxing + base64 依賴(lài)

<!-- 解析二維碼 -->
　　<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("條形碼的內(nèi)容是：" + decode.getText());
        rm.setMsg(decode.getText());
       
      } catch (Exception e) {
        e.printStackTrace();
        log.debug("解析失敗：",e);
        rm.setSuccess(false);
        rm.setMsg("解析失敗");
      }
     return rm;
  }

以上就是Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例的詳細(xì)內(nèi)容，更多關(guān)于Vue+Java+Base64實(shí)現(xiàn)條碼解析的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: