扫描二维码的实现(barcode) ---- HTML5+

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>

巴特西

扫描二维码的实现(barcode) ---- HTML5+

最新文章

热门文章