首页 > 建站教程 > APP开发,混合APP >  HTML5+ 扫描二维码barcode实例正文

HTML5+ 扫描二维码barcode实例

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

    使用场景:扫码关注,扫描支付,扫描登录,各种扫描,一起都是信息,一切都可以是二维码;

调用方式:
    1、图片识别:这个图片是一个二维码,然后识别这个图片;
    2、摄像头扫描:扫描手机上的二维码进行支付等;

常用的常量:QR(二维码),EAN13:一维码;
QR: 条码类型常量,QR二维码,数值为0
EAN13: 条码类型常量,EAN一维条形码码标准版,数值为1
EAN8: 条码类型常量,ENA一维条形码简版,数值为2
AZTEC: 条码类型常量,Aztec二维码,数值为3
DATAMATRIX: 条码类型常量,Data Matrix二维码,数值为4
UPCA: 条码类型常量,UPC码标准版,数值为5
UPCE: 条码类型常量,UPC码缩短版,数值为6
CODABAR: 条码类型常量,Codabar码,数值为7
CODE39: 条码类型常量,Code39一维条形码,数值为8
CODE93: 条码类型常量,Code93码,数值为9
CODE128: 条码类型常量,Code128码,数值为10
ITF: 条码类型常量,ITF码,数值为11
MAXICODE: 条码类型常量,MaxiCode二维码,数值为12
PDF417: 条码类型常量,PDF 417码,数值为13
RSS14: 条码类型常量,RSS 14组合码,数值为14
RSSEXPANDED: 条码类型常量,扩展式RSS组合码,数值为15
第一种:图片识别:

    扫描图片的方法:scan:传图片的地址,和成功回调和失败回调;
plus.barcode.scan(path,successCB,errorCB,filters);
//filters就是右边的这些:QR,EAN13.....这个是一个数组,通过这个数组就可以过滤掉一些(例如:我们只识别二维码不识别一维码,就传递一个QR进去:
var filter = [plus.barcode.QR,plus.barcode.AZTEC];
plus.barcode.scan(path,successCB,errorCB,filter);)
    具体示例:
// 如何识别本地的二维码
$("#startCanOne").bind('tap',function(){
    plus.gallery.pick(function(){
        plus.barcode.scan(Path,function(type,code,file){
            var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
            $("#info").html(result);
        },function(error){
            plus.nativeUI.alert('无法识别图片');
        });
    },function(err){
        plus.nativeUI.alert('Failed:'+err.message);
    });
});
第二种:摄像头扫描 

    摄像头扫描用的就是:Barcode这个对象;

    步骤

        首先是初始化对象,new一个,然后start一下,然后进行识别,识别完成之后进行回调(回调就可以识别里面的信息);

        第一步:new一个对象;new的时候:
new plus.barcode.Barcode(id,filters,styles);
        ID:对象ID用户识别控件的初始化;就是一个div,一个识别二维码的一个框,就是指定一个容器;
        filters:要识别的条形码类型过滤器,为条码类型常量数组;就是指定一个数组,能识别什么,不能识别什么;
        styles:条码识别控件样式;
string frameColor:扫描框的颜色;
string scanbarColor:扫描条颜色;
string background:条码识别控件背景颜色;
        第二步:指定一个回调函数;
        第三步:回调识别里面的信息;
$("#startCan").bind('tap',function(){
    // 扫描二维码
    var barScan = new plus.barcode.Barcode("scanContainer");
    barScan.onmarked = function(type,code,file){
        var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
        $("#info").html(result);
    };
    //barScan.start(); 开始扫描
    barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径        
});
下面来一段我爱模板网项目实战的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5+ 扫描二维码barcode实例 - 我爱木板网 www.5imoban.net</title>
<link href="../css/mui.min.css" rel="stylesheet"/>
<style>
.mui-content section{margin: 15px; background: #fff; padding: 15px;}
.mui-content section span{display: block; padding-bottom: 10px; font-size: 16px;}
.mui-content section input[type=text]{background: url(../img/money-ico.png) no-repeat 0 30px; background-size: auto 21px; padding-left:30px; border: none; border-bottom:1px solid #e0e0e0; font-size: 45px; color:#42cca2; font-weight: bold; height: 84px; line-height:84px}
.button{width:100%; margin:20px auto; display: block; background: #42cca2; color: #fff; text-align: center; font-size: 16px; padding: 15px 0; border-radius: 5px;}
.button:hover,.button:active{background-color:#84dcc6; color: #fff;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">输入金额</h1>
</header>
<div class="mui-content">
 <section>
 <span>输入金额</span>
 <input type="text" value="30">
 <a class="button" id="scan">扫一扫支付 扫描二维码</a>
 <a class="button" id="scan2">扫一扫支付 识别本地的二维码</a>
 </section>
</div>
<div style="width:100%; height:100%; margin: auto; top:0; left: 0; position: fixed; display: none; z-index: 10;" id="scanContainer"></div>

<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init({
 swipeBack: true
});

mui.plusReady(function(){
    mui("#scan")[0].addEventListener('tap',function(){
        // 扫描二维码
        document.getElementById("scanContainer").style.display = "block";
        var barScan = new plus.barcode.Barcode("scanContainer");
        //barScan.start(); 开始扫描
        barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径 
        //条码扫描成功事件
        barScan.onmarked = function(type,code,file){
            var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
            console.log(result);
            //关闭
         barScan.close();
         document.getElementById("scanContainer").style.display = "none";
        };
        barScan.onerror = function(){
         alert("扫描失败");
        }
    });

    // 识别本地的二维码
    mui("#scan2")[0].addEventListener('tap',function(){
        plus.gallery.pick(function(path){
            plus.barcode.scan(path,function(type,code,file){
                var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
                console.log(result);
            },function(error){
                plus.nativeUI.alert('无法识别图片');
            });
        },function(err){
            plus.nativeUI.alert('Failed:'+err.message);
        });
    });

    //重写mui.js里面的back方法,安卓点击返回键退出扫描
    var oldBack = mui.back;
	mui.back = function(){
		if(barScan){
	        //关闭barScan
	    	barScan.close();
	    	document.getElementById("scanContainer").style.display = "none";
	    	barScan = null;
			return false;
		}else{
			//如果没有扫描,则返回
			oldBack();
		}
	}

});
</script>
</body>
</html>