ionic3 实现扫码功能

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\n" +
        "Result: " + barcodeData.text + "\n" +
        "Format: " + barcodeData.format + "\n" +
        "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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值