掃描二維碼的實現(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/"});// 可以配置掃描后保存的路徑        
});
復制代碼

具體示例

復制代碼
<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 mui-content-padded">
    <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCan">開始掃描</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCanOne">識別本地</button>
    <div id="scanContainer" style="width:300px; height:300px; border:1px solid red; margin:0px auto;"></div>
    <div id="info"></div>
</div>
<script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
    $("#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/"});// 可以配置掃描后保存的路徑        
    });
    // 如何識別本地的二維碼
    $("#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);
        });
    });
});
</script>
復制代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM