ionic3 通过插件phonegap-plugin-barcodescanner,调用机器硬件摄像头实现扫码功能。
首先当然先了解下 phonegap-plugin-barcodescanner,这个插件。
支持的平台
- Android的
- iOS版
- Windows(Windows / Windows Phone 8.1和Windows 10)
- Windows Phone 8
- 黑莓10
- 浏览器
支持的条码类型
安装
首先,我们在项目中安装这个插件和ionic-native插件:
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner
使用:
import { BarcodeScanner } from '@ionic-native/barcode-scanner'; ..... constructor(private barcodeScanner: BarcodeScanner) { } ..... scan{ alert("We got a barcode " + "Result: " + barcodeData.text + " " + "Format: " + barcodeData.format + " " + "Cancelled: " + barcodeData.cancelled); }
当然不能忘记将此插件添加到应用程序的NgModule中
... import { BarcodeScanner } from '@ionic-native/barcode-scanner'; ... @NgModule({ ... providers: [ ... BarcodeScanner ... ] ... }) export class AppModule { }
添加安卓平台
cordova platform add android
运行在真机上
cordova run android
后来在使用过程被大佬说这个插件不行啊,效率不行啊。在ios上扫码的速度还ok,可是到了android手机上扫码真慢,看他是先拍照截图下来再进行识别的,太慢了。
后来我看上了这款扫码插件→cordova-plugin-cszbar
install plugin:
ionic cordova plugin add cordova-plugin-cszbar
npm install --save @ionic-native/zbar
ps:要移除我前面安装的那个插件,不然再安装这个插件就会出现错误的。
支持平台:
- Android
- iOS
用法:
import { ZBar, ZBarOptions } from '@ionic-native/zbar'; constructor(private zbar: ZBar) { } ... scan() { let options: ZBarOptions = { flash: 'off', text_title: '扫码', drawSight: false }; this.zbar.scan(options) .then(result => { alert("结果:" + result); // Scanned code }) .catch(error => { alert(error); // Error message }); }
记得将插件添加到应用程序的NgModule中
... import { ZBar } from '@ionic-native/zbar'; ... @NgModule({ ... providers: [ ... ZBar ... ] ... }) export class AppModule { }
这份Zbar插件实现的扫码功能,在ios上可以说效率是飞快了,在android上 也很ok,比之前那个phonegap-plugin-barcodescanner快了很多了。
如果仅仅是ios跟android这两个平台上实现扫码功能,那么Zbar也是够用了。
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
ps:github链接→https://github.com/tjwoon/csZBar