Vue+Java+Base64实现条码解析

引入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

<!-- 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;
}
龙华大道1号http://www.kinghill.cn/LongHuaDaDao1Hao/index.html