Posted in Javascript onSeptember 23, 2020
前端部分(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; }
以上就是Vue+Java+Base64实现条码解析的示例的详细内容,更多关于Vue+Java+Base64实现条码解析的资料请关注三水点靠木其它相关文章!
Vue+Java+Base64实现条码解析的示例
- Author -
Mr_Bingzi声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@