当前位置：A5下载 > 网页制作 > 基于MUI框架使用HTML5实现的二维码扫描功能

基于MUI框架使用HTML5实现的二维码扫描功能

时间：2018-03-06 13:55作者：zy人气：495

Barcode的一个实现案例

一、简介

Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

二、实现的效果

三、实现代码

<!doctype html>

<html>

<head>

#bcid{

width: 100%;

height: 100%;

position: absolute;

background: #000000;

}

html, body ,div{

height:100%;

width: 100%;

}

.fbt{

color: #0E76E1;

width: 50%;

background-color: #ffffff;

float: left;

line-height: 44px;

text-align: center;

}

</style>

</head>

<body>

<h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>

</header>

<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>

</div>

//扫描对象

mui.plusReady(function () {

mui.init();

startRecognize();

});

function startRecognize(){

try{

var filter;

//自定义的扫描控件样式

var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}

//扫描控件构造

scan = new plus.barcode.Barcode('bcid',filter,styles);

scan.onmarked = onmarked;

scan.onerror = onerror; scan.start();

//打开关闭闪光灯处理

var flag = 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);

} };

function onerror(e){ alert(e); };

function onmarked( type, result ) {

var text = '';

switch(type){

case plus.barcode.QR: text = 'QR: ';

break;

case plus.barcode.EAN13: text = 'EAN13: ';

break;

case plus.barcode.EAN8: text = 'EAN8: ';

break;

}

alert( text + " : "+ result );

};

// 从相册中选择二维码图片

function scanPicture() {

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，div占满整个页面

1，此div宽高都为100%，父级元素的高度也为此(依次类推直至根节点)，或者此div的position为absolute;

2，可采用js动态设置页面宽高

var height = window.innerHeight + 'px';

//获取页面实际高度

var width = window.innerWidth + 'px';

document.getElementById("bcid").style.height= height;

document.getElementById("bcid").style.width= width;

b,扫描控件有上下边距

采用填充黑色来淡化视觉上面的差异，未实际解决，

总结

以上所述是小编给大家介绍的基于MUI框架使用HTML5实现的二维码扫描功能，希望对大家有所帮助。

标签基于,MUI,框架,使用,HTML5,实现,二维,扫描,功能

A5站长下载站

基于MUI框架使用HTML5实现的二维码扫描功能

相关推荐

相关下载

网友评论

热门阅览

最新排行