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