如何使用HTML5实现二维码扫描功能
本篇内容介绍了"如何使用HTML5实现二维码扫描功能"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
#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;
}
scan=null;//扫描对象
mui.plusReady(function(){
mui.init();
startRecognize();
});
functionstartRecognize(){
try{
varfilter;
//自定义的扫描控件样式
varstyles={frameColor:"#29E52C",scanbarColor:"#29E52C",background:""}
//扫描控件构造
scan=newplus.barcode.Barcode('bcid',filter,styles);
scan.onmarked=onmarked;
scan.onerror=onerror;
scan.start();
//打开关闭闪光灯处理
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("出现错误啦:\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);
});
}
三、做的过程中遇见的问题
a，p占满整个页面
1，此p宽高都为100%，父级元素的高度也为此(依次类推直至根节点)，或者此p的position为absolute;
2，可采用js动态设置页面宽高
varheight=window.innerHeight+'px';//获取页面实际高度
varwidth=window.innerWidth+'px';
document.getElementById("bcid").style.height=height;
document.getElementById("bcid").style.width=width;
b,扫描控件有上下边距
"如何使用HTML5实现二维码扫描功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
