如何使用HTML5实现二维码扫描功能

本篇内容介绍了“如何使用HTML5实现二维码扫描功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联建站是一家专注于网站设计制作、成都网站制作与策划设计,古田网站建设哪家好?创新互联建站做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:古田等地区。古田做网站价格咨询:18980820575

#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实现二维码扫描功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！