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

来源:互联网 发布:细说php第二版高清pdf 编辑:程序博客网 时间:2024/04/25 13:17

参考资料: 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();    })
1 0
原创粉丝点击