使用场景:扫码关注,扫描支付,扫描登录,各种扫描,一起都是信息,一切都可以是二维码;
调用方式:
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>