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

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

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

<!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:""}

//扫描控件构造

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);

});

}

</script>

</body>

</html>

三、做的过程中遇见的问题

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