SoFunction
Updated on 2025-04-07

Example of Vue+Java+Base64 implementing barcode parsing

Front-end part (Vue + Vant)

  • Introduce Vant and use the Uploader component in Vant to upload files (support mobile phone photography)
import Vue from 'vue' 
import { Uploader } from 'vant' 
(Uploader);
  • Upload component using Uploader
 <van-uploader>
  <van-button icon="plus" type="primary" :after-read="afterRead">    
   Upload file(Identify barcode)
 </van-button>
 </van-uploader>
  • The js part and file will be triggered after uploadingafter-read Callback function to obtain the corresponding file Object.
afterRead(file) {
  var self = this;
  //Calling the upload callback function - upload  (this.$baseUrl + "upload/uploadParsing", file,
  function (response) {
    if(  >0){
     ()
    }else{
      ('The recognition failed, please upload the barcode again!  ',3500)
    }
   });  

 },
 
 upLoad(url, file, func) {
    var fileBase64 =''
    // Create Canvas object (canvas)    debugger
    let canvas = ("canvas");
    // Get the corresponding CanvasRenderingContext2D object (brush)    let context = ("2d");
    // Create a new image object    let img = new Image();
    // Specify the DataURL of the picture (base64 encoded data of the picture)     = ;
    // Listen to the browser to load the picture and then draw it     = () => {
      // Specify the canvas size, which is the size of the last generated image       = 400;
       = 300;
      /* method of drawingImage canvas.  (0,0) means starting from the upper left corner of the Canvas canvas, 400, 300 means reducing the picture by the given pixel.
       If the reduced pixel image is not specified, the image will be drawn in the original size of the image. If the image pixel is larger than the canvas, the image will be drawn in the upper left corner according to the canvas size part, and the last picture is a partial picture.  */
 
      (img, 0, 0, 400, 300);
      // Reconvert the drawn image into base64 encoding, which is the image type, and 0.92 is the default compression quality       = (, 0.92);
      fileBase64 = 
      // Finally, save the base64-encoded image to the array and leave it to upload.  43 (fileBase64)      //Query the dictionary value      this.$(url,{'fileBase64Code' :fileBase64})
      .then(function (response) {
       func();
      }.bind(this))
      .catch(function (error) {
        ("Recognition failed, please upload the barcode again!",3500);
      })
   };
 },

Backend part (Java)

Add zxing + base64 dependency

<!-- Analyze QR code -->
<dependency>
    <groupId></groupId>
    <artifactId>core</artifactId>
    <version>3.3.3</version>
  </dependency>
  <dependency>
    <groupId></groupId>
    <artifactId>javase</artifactId>
    <version>3.3.3</version>
  </dependency>


  <!-- Base64 -->
  <!-- /artifact//base64 -->
  <dependency>
    <groupId></groupId>
    <artifactId>base64</artifactId>
    <version>2.3.8</version>
  </dependency>

Controller

@ResponseBody
@RequestMapping(value = "/uploadParsing", method = )
public ResponseMessage uploadParsing(@RequestBody imgUploadMessage uploadFile){
    ResponseMessage rm=new ResponseMessage();
    //After parsing Base64 encoding, read the bar    try {
      String imgStr = uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf(",")+1);
      Decoder decoder = ();
      byte[] base = (imgStr);
      for (int i = 0; i < ; ++i) {
        if (base[i] < 0) {
          base[i] += 256;
        }
      }
       ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(base);
       BufferedImage read = ( byteArrayInputStream);
        if (null==read) {
          ("Parse failed");
          (false);
          return rm;
        }
        BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(read);
        BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));
        Map<DecodeHintType,Object> hints=new HashMap<>();
        (DecodeHintType.CHARACTER_SET,"GBK");
        (DecodeHintType.PURE_BARCODE,);
        (DecodeHintType.TRY_HARDER,);
  
        Result decode = new MultiFormatReader().decode(bitmap, hints);
        ("The content of the barcode is:" + ());
        (());
       
      } catch (Exception e) {
        ();
        ("Resolution failed:",e);
        (false);
        ("Parse failed");
      }
     return rm;
  }

The above is the detailed content of the example of Vue+Java+Base64 implementing barcode analysis. For more information about Vue+Java+Base64 implementing barcode analysis, please pay attention to my other related articles!