• 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
    " +
            "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

  • 相关阅读:
    自定义查询条件存储过程
    管道分隔符Split
    开机进入boot menu和application menu,无法开机
    [SQL]SQL语言入门级教材_SQL数据操作基础(二)
    [SQL]SQL语言入门级教材_SQL功能与特性(一)
    编程规范(三)
    编程规范(二)
    类与结构的差别
    经典命名
    [SQL]SQL Server数据表的基础知识与增查删改
  • 原文地址:https://www.cnblogs.com/huangenai/p/7350717.html
Copyright © 2020-2023  润新知