Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例
前端部分(Vue + Vant)
- 引入Vant、使用Vant中的Uploader組件上傳文件(支持手機(jī)拍照)
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
- 使用Uploader上傳組件
<van-uploader> <van-button icon="plus" type="primary" :after-read="afterRead"> 上傳文件(識(shí)別條碼) </van-button> </van-uploader>
- js部分、文件上傳完畢后會(huì)觸發(fā)
after-read回調(diào)函數(shù),獲取到對(duì)應(yīng)的file對(duì)象。
afterRead(file) {
var self = this;
//調(diào)用上傳回調(diào)函數(shù) - upload
this.upLoad(this.$baseUrl + "upload/uploadParsing", file,
function (response) {
if( response.msg.length >0){
console.log(response.msg)
}else{
Toast.fail('識(shí)別失敗,請(qǐng)重新上傳條碼!',3500)
}
});
},
upLoad(url, file, func) {
var fileBase64 =''
// 創(chuàng)建Canvas對(duì)象(畫(huà)布)
debugger
let canvas = document.createElement("canvas");
// 獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
let context = canvas.getContext("2d");
// 創(chuàng)建新的圖片對(duì)象
let img = new Image();
// 指定圖片的DataURL(圖片的base64編碼數(shù)據(jù))
img.src = file.content;
// 監(jiān)聽(tīng)瀏覽器加載圖片完成,然后進(jìn)行進(jìn)行繪制
img.onload = () => {
// 指定canvas畫(huà)布大小,該大小為最后生成圖片的大小
canvas.width = 400;
canvas.height = 300;
/* drawImage畫(huà)布繪制的方法。(0,0)表示以Canvas畫(huà)布左上角為起點(diǎn),400,300是將圖片按給定的像素進(jìn)行縮小。
如果不指定縮小的像素圖片將以圖片原始大小進(jìn)行繪制,圖片像素如果大于畫(huà)布將會(huì)從左上角開(kāi)始按畫(huà)布大小部分繪制圖片,最后的圖片就是張局部圖。*/
context.drawImage(img, 0, 0, 400, 300);
// 將繪制完成的圖片重新轉(zhuǎn)化為base64編碼,file.file.type為圖片類(lèi)型,0.92為默認(rèn)壓縮質(zhì)量
file.content = canvas.toDataURL(file.file.type, 0.92);
fileBase64 = file.content
// 最后將base64編碼的圖片保存到數(shù)組中,留待上傳。43 console.log(fileBase64)
//查詢(xún)字典值
this.$axios.post(url,{'fileBase64Code' :fileBase64})
.then(function (response) {
func(response.data);
}.bind(this))
.catch(function (error) {
Toast.file("識(shí)別失敗,請(qǐng)重新上傳條碼!",3500);
})
};
},
后端部分(Java )
添加 zxing + base64 依賴(lài)
<!-- 解析二維碼 -->
<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("條形碼的內(nèi)容是:" + decode.getText());
rm.setMsg(decode.getText());
} catch (Exception e) {
e.printStackTrace();
log.debug("解析失敗:",e);
rm.setSuccess(false);
rm.setMsg("解析失敗");
}
return rm;
}
以上就是Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例的詳細(xì)內(nèi)容,更多關(guān)于Vue+Java+Base64實(shí)現(xiàn)條碼解析的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
最適應(yīng)的vue.js的form提交涉及多種插件【推薦】
這篇文章主要介紹了最適應(yīng)的vue.js的form提交涉及多種插件,涉及到 vue.js動(dòng)態(tài)添加css樣式 ,tab切換 ,touch,表單提交,驗(yàn)證,toast,數(shù)據(jù)雙向綁定等。需要的朋友可以參考下2018-08-08
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng),這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題
這篇文章主要介紹了vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue實(shí)現(xiàn)購(gòu)物車(chē)選擇功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)選擇功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
vue實(shí)現(xiàn)滑動(dòng)到底部加載更多效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)到底部加載更多效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08
vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點(diǎn)擊事件方法的使用(click),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08

