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
- HTML5+规范:barcode(条码扫描)
- HTML5+规范:barcode(条码扫描)
- BlackBerry WebWorks应用例子:扫描条码barcode
- 制作条码(barcode)
- C# Barcode 条码
- 跨平台移动开发phonegap/cordova 3.3全系列教程-条码扫描barcode
- 条码扫描
- 条码BarCode打印识别问题
- 第32期-制作条码(barcode)
- BPS(Barcode Positioning System)条码定位系统
- Barcode Recognition Decoder SDK条码100控件
- jquery-barcode:js实现的条码打印
- 条码扫描手机软件设计
- Android条码扫描
- iOS - 二维码、条码扫描
- H5+ 调用Barcode(二维码扫描)
- 条码生成工具Aspose.BarCode 5.2更新信息+下载
- 利用IDAutomation Barcode ActiveX在InfoPath中创建条码
- 由斐波那契数列问题引出的问题
- 使用ajax将后台数据输出到前台,实现页面动态化
- android TextView 垂直自动滚动字幕实现TextSwitcher
- Kettle-7.0使用举例
- 机器学习小组知识点34:K-means聚类
- HTML5+规范:barcode(条码扫描)
- 域名如何配置到你的项目
- 软件正向工程
- Activity的launchMode和taskAffinity介绍
- 用PyCharm专业版实现远程调试tensorflow
- 示例:WPF注册补货全局异常
- 如何利用花生壳来搭建突破内网访问的服务器
- 比特率
- [类欧几里得算法] BZOJ 2712 [Violet 2]棒球