前端部分（Vue + Vant）
- 引入Vant、使用Vant中的Uploader組件上傳檔案(支持手機拍照)
1 import Vue from 'vue' 2 import { Uploader } from 'vant' 3 Vue.use(Uploader);View Code
- 使用Uploader上傳組件
1 <van-uploader> 2 <van-button icon="plus" type="primary" :after-read="afterRead"> 3 上傳檔案(識別條碼) 4 </van-button> 5 </van-uploader>
-
js部分、檔案上傳完畢后會觸發
after-read回呼函式，獲取到對應的file物件，
1 afterRead(file) { 2 var self = this; 3 //呼叫上傳回呼函式 - upload 4 this.upLoad(this.$baseUrl + "upload/uploadParsing", file, 5 function (response) { 6 if( response.msg.length >0){ 7 console.log(response.msg) 8 }else{ 9 Toast.fail('識別失敗，請重新上傳條碼！',3500) 10 } 11 });13 }, 14 15 upLoad(url, file, func) { 17 var fileBase64 ='' 18 // 創建Canvas物件(畫布) 19 debugger 20 let canvas = document.createElement("canvas"); 21 // 獲取對應的CanvasRenderingContext2D物件(畫筆) 22 let context = canvas.getContext("2d"); 23 // 創建新的圖片物件 24 let img = new Image(); 25 // 指定圖片的DataURL(圖片的base64編碼資料) 26 img.src =https://www.cnblogs.com/bingziweb/archive/2020/09/22/ file.content; 27 // 監聽瀏覽器加載圖片完成，然后進行進行繪制 28 img.onload = () => { 30 // 指定canvas畫布大小，該大小為最后生成圖片的大小 31 canvas.width = 400; 32 canvas.height = 300; 33 /* drawImage畫布繪制的方法，(0,0)表示以Canvas畫布左上角為起點，400，300是將圖片按給定的像素進行縮小， 34 如果不指定縮小的像素圖片將以圖片原始大小進行繪制，圖片像素如果大于畫布將會從左上角開始按畫布大小部分繪制圖片，最后的圖片就是張區域圖，*/ 35 36 context.drawImage(img, 0, 0, 400, 300); 37 // 將繪制完成的圖片重新轉化為base64編碼，file.file.type為圖片型別，0.92為默認壓縮質量 38 file.content = canvas.toDataURL(file.file.type, 0.92); 39 fileBase64 = file.content 40 // 最后將base64編碼的圖片保存到陣列中，留待上傳，43 console.log(fileBase64) 44 //查詢字典值 45 this.$axios.post(url,{'fileBase64Code' :fileBase64}) 46 .then(function (response) { 47 func(response.data); 48 }.bind(this)) 49 .catch(function (error) { 50 Toast.file("識別失敗，請重新上傳條碼！",3500); 51 }) 52 }; 53 },
后端部分（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>
View Code -
@ResponseBody @LoginToken(required = false) @RequestMapping(value = "https://www.cnblogs.com/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(); rm.setSuccess(false); rm.setMsg("決議失敗"); } return rm; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/107530.html
標籤：其他