本篇教程探讨了HTML5教程之扫描二维码的实现，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

模块：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=‘//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>

   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！