HTML5+规范:barcode(条码扫描)

参考资料: http://blog.csdn.net/qq_27626333/article/details/51815121

今天做了个html5调用摄像头访问二维码的功能,调了一天终于通啦,嘎嘎:
步骤:
1、下载mui.min.js,放在项目中
2、index.html页面引用:

 <script src="Scripts/mui.min.js"></script>

3、tab-ScanCode.html页面代码:

<ion-view class="tzgg" hide-nav-bar="true"> 
    <ion-content class="erweima">
        <div class="module">
            <div class="content">               
                <div>
                    <div id="bcid"></div>
                </div>              
            </div>
        </div>
    </ion-content>  
<div class="fixbtn">    
        <span ng-click="cancelScanDo()"><i class="ion-ios-barcode-outline" id="cancelScan" ></i ><b>取消扫描</b></span>
    </div>
</ion-view>

4、ScanCodeCtrl代码:

ctr.controller('ScanCodeCtrl', ['$scope', '$location', 'dataService', '$window', '$ionicPopup', '$ionicBackdrop', function($scope, $location, dataService, $window, $ionicPopup, $ionicBackdrop) {
    setStyle();
    //mui初始化
    mui.init();
    //  mui.init({
    //      swipeBack: true //启用右滑关闭功能
    //  });
    var scan = null;
    var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    // 条码识别成功事件
    function onmarked(type, result) {
        var text = '未知: ';
        switch(type) {
            case plus.barcode.QR:
                text = 'QR: '; // 二维码
                break;
            case plus.barcode.EAN13:
                text = 'EAN13: ';
                break;
            case plus.barcode.EAN8:
                text = 'EAN8: ';
                break;
        }
        alert(text + result);
        //关闭界面,返回首页
        scan.close(); //关闭扫描scan    
        $window.location.href = "#/tab/shouye";
    }
    // 创建扫描控件
    function startRecognize() {     
        scan = new plus.barcode.Barcode('bcid');
        //scan.start();     
        scan.onmarked = onmarked;
    }

    function setStyle() {       
        $("#bcid").width($(window).width());
        $("#bcid").height($(window).height() - 70);
    }

    // 开始扫描
    function StartDo() {
        startRecognize();
        scan.start();
    }
    //开始扫描
    $scope.$on('$ionicView.afterEnter', function() {  
        StartDo();
    })
    //取消扫描
    $scope.cancelScanDo = function() {
            if(scan != null) {
                scan.close(); //关闭扫描scan    
            }
            $window.location.href = "#/tab/shouye";
    }       
}])

注:以下代码很重要,如果不加$scope.$on('$ionicView.afterEnter', function() { });的话,第一次可以显示扫描的摄像头,第二次再点击,则不显示了。加上上面的代码即可了。具体的也没太搞懂,貌似是页面加载完成后再执行的东西。

//开始扫描
    $scope.$on('$ionicView.afterEnter', function() {  
        StartDo();
    })
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值