模塊: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>