溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“如何使用HTML5實現(xiàn)二維碼掃描功能”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<linkhref="css/mui.min.css"rel="stylesheet"/>
<scriptsrc="js/mui.min.js"></script>
<styletype="text/css">
#bcid{
width:100%;
height:100%;
position:absolute;
background:#000000;
}
html,body,p{
height:100%;
width:100%;
}
.fbt{
color:#0E76E1;
width:50%;
background-color:#ffffff;
float:left;
line-height:44px;
text-align:center;
}
</style>
</head>
<body>
<headerclass="mui-barmui-bar-nav"style="background-color:#ffffff;">
<aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a>
<h2class="mui-title"style="color:#0E76E1;">物品二維碼掃描</h2>
<spanclass="mui-iconmui-icon-spinner-cyclemui-spinmui-pull-right"id="turnTheLight"></span>
</header>
<pid="bcid">
<!--盛放掃描控件的p-->
</p>
<pclass="mui-barmui-bar-footer"style="padding:0px;">
<pclass="fbt"onclick="scanPicture();">從相冊選擇二維碼</p>
<pclass="fbtmui-action-back">取消</p>
</p>
<scripttype="text/javascript">
scan=null;//掃描對象
mui.plusReady(function(){
mui.init();
startRecognize();
});
functionstartRecognize(){
try{
varfilter;
//自定義的掃描控件樣式
varstyles={frameColor:"#29E52C",scanbarColor:"#29E52C",background:""}
//掃描控件構(gòu)造
scan=newplus.barcode.Barcode('bcid',filter,styles);
scan.onmarked=onmarked;
scan.onerror=onerror;
scan.start();
//打開關(guān)閉閃光燈處理
varflag=false;
document.getElementById("turnTheLight").addEventListener('tap',function(){
if(flag==false){
scan.setFlash(true);
flag=true;
}else{
scan.setFlash(false);
flag=false;
}
});
}catch(e){
alert("出現(xiàn)錯誤啦:\n"+e);
}
};
functiononerror(e){
alert(e);
};
functiononmarked(type,result){
vartext='';
switch(type){
caseplus.barcode.QR:
text='QR:';
break;
caseplus.barcode.EAN13:
text='EAN13:';
break;
caseplus.barcode.EAN8:
text='EAN8:';
break;
}
alert(text+":"+result);
};
//從相冊中選擇二維碼圖片
functionscanPicture(){
plus.gallery.pick(function(path){
plus.barcode.scan(path,onmarked,function(error){
plus.nativeUI.alert("無法識別此圖片");
});
},function(err){
plus.nativeUI.alert("Failed:"+err.message);
});
}
</script>
</body>
</html>
三、做的過程中遇見的問題
a，p占滿整個頁面
1，此p寬高都為100%，父級元素的高度也為此(依次類推直至根節(jié)點)，或者此p的position為absolute;
2，可采用js動態(tài)設(shè)置頁面寬高
varheight=window.innerHeight+'px';//獲取頁面實際高度
varwidth=window.innerWidth+'px';
document.getElementById("bcid").style.height=height;
document.getElementById("bcid").style.width=width;
b,掃描控件有上下邊距
“如何使用HTML5實現(xiàn)二維碼掃描功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
