Vue+Java+Base64实现条码解析的示例
前端部分(Vue+Vant)
- 引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
importVuefrom'vue' import{Uploader}from'vant' Vue.use(Uploader);
- 使用Uploader上传组件
上传文件(识别条码)
- js部分、文件上传完毕后会触发after-read回调函数,获取到对应的file对象。
afterRead(file){ varself=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){ varfileBase64='' //创建Canvas对象(画布) debugger letcanvas=document.createElement("canvas"); //获取对应的CanvasRenderingContext2D对象(画笔) letcontext=canvas.getContext("2d"); //创建新的图片对象 letimg=newImage(); //指定图片的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编码的图片保存到数组中,留待上传。43console.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 net.iharder base64 2.3.8
Controller
@ResponseBody @RequestMapping(value="/uploadParsing",method=RequestMethod.POST) publicResponseMessageuploadParsing(@RequestBodyimgUploadMessageuploadFile){ ResponseMessagerm=newResponseMessage(); //解析Base64编码之后读取条 try{ StringimgStr=uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf(",")+1); Decoderdecoder=Base64.getDecoder(); byte[]base=decoder.decode(imgStr); for(inti=0;ihints=newHashMap<>(); hints.put(DecodeHintType.CHARACTER_SET,"GBK"); hints.put(DecodeHintType.PURE_BARCODE,Boolean.TRUE); hints.put(DecodeHintType.TRY_HARDER,Boolean.TRUE); Resultdecode=newMultiFormatReader().decode(bitmap,hints); log.debug("条形码的内容是:"+decode.getText()); rm.setMsg(decode.getText()); }catch(Exceptione){ e.printStackTrace(); log.debug("解析失败:",e); rm.setSuccess(false); rm.setMsg("解析失败"); } returnrm; }
以上就是Vue+Java+Base64实现条码解析的示例的详细内容,更多关于Vue+Java+Base64实现条码解析的资料请关注毛票票其它相关文章!