ionic3 使用QR Scaner 扫描

ionic 官方有提供三个扫描插件，分别为：

1. Barcode Scanner
   速度很慢，样式不怎样
2. QR Scanner
   速度快，样式随心所欲，直接在html里修改属于自己的样式
3. ZBar
   速度快，能扫描条形码与二维码，这样也导致如果二维码附近有其它类似一维码的图案，可能会影响值的准确性，还有没有提供扫描框

综合以上，所以最后还是决定使用QR Scaner进行扫描。

1. 安装插件

$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner

2. 新建扫描页面

$ ionic g page scan

成功后

图片.png

3. 使用

assets/imgs
扫描框图片做css背景
下载图片

图片.png

scan.html

<ion-header >
  <ion-navbar >
      <ion-title>扫描中……</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-scroll class="qrscanner" >
  <div class="qrscanner-area">    
  </div> 
   <div class="through-line"></div>
  <div class="button-bottom">
      <button (click)="toggleLight()" ion-fab class="icon-camera" margin-right>
          <ion-icon name="flash"></ion-icon>                  
      </button>
      <button (click)="toggleCamera()" ion-fab class="icon-camera">
          <ion-icon name="reverse-camera"></ion-icon>                  
      </button>
  </div>    
</ion-content>

scan.scss

page-scan {
.qrscanner {
    background: none;
    &-area {
      width: 100%;
      height: 86%;
      background: url(../assets/imgs/scanner.svg) no-repeat center center;
      background-size: contain;
    }
  }
  .through-line {
    left: 25%;
    width: 50%;
    height: 2px;
    background: red;
    position: absolute;
    animation: myfirst 2s linear infinite alternate;
  }
  @keyframes myfirst {
    0% {
      background: red;
      top: 30%;
    }
    25% {
      background: yellow;
      top: 35%;
    }
    50% {
      background: blue;
      top: 40%;
    }
    75% {
      background: green;
      top: 45%;
    }
    100% {
      background: red;
      top: 50%;
    }
  }
  .button-bottom {
    width: 128px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -64px;
    .icon-camera {
      float: left;
    }
}
}

scan.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

/**
 * Generated class for the ScanPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-scan',
  templateUrl: 'scan.html',
})
export class ScanPage {
  light: boolean;//判断闪光灯
  frontCamera: boolean;//判断摄像头

  constructor(
    private navCtrl: NavController,
    private navParams: NavParams,
    private qrScanner: QRScanner,
    private viewCtrl: ViewController) {
      //默认为false
      this.light = false;
      this.frontCamera = false;
  }

  ionViewDidLoad() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted
          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            alert(text);      
            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
            this.navCtrl.pop();
          });

          // show camera preview
          this.qrScanner.show();

          // wait for user to scan something, then the observable callback will be called
        } else if (status.denied) {
          // camera permission was permanently denied
          // you must use QRScanner.openSettings() method to guide the user to the settings page
          // then they can grant the permission from there
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
        }
      })
      .catch((e: any) => console.log('Error is', e));
  }

  ionViewDidEnter(){
    //页面可见时才执行
    this.showCamera();
  }



  /**
   * 闪光灯控制，默认关闭
   */
  toggleLight() {
    if (this.light) {
      this.qrScanner.disableLight();
    } else {
      this.qrScanner.enableLight();
    }
    this.light = !this.light;
  }

  /**
   * 前后摄像头互换
   */
  toggleCamera() {
    if (this.frontCamera) {
      this.qrScanner.useBackCamera();
    } else {
      this.qrScanner.useFrontCamera();
    }
    this.frontCamera = !this.frontCamera;
  }

  showCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
  }
  hideCamera() {    
    this.qrScanner.hide();//需要关闭扫描，否则相机一直开着
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
  }

  ionViewWillLeave() {
    this.hideCamera();
  }
}

variables.scss

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important; 
  .tabbar.show-tabbar{
    opacity: 0;
  }
}

最后在所需的页面跳转scan页面即可

this.navCtrl.push('ScanPage');

4. 效果

1.gif

5. android版本仍黑屏问题

当你以上设置完后，运行在android手机上背景无法透明，依然显示黑屏的情况，主要是ionic css的结构被改变过，所以代码所设置的样式无法生效，例如安装了cordova-plugin-crosswalk-webview无法正确显示相机画面。把它删除即可