ionic3 使用QR Scaner 扫描

https://www.jianshu.com/p/45f8b44b9a42

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

Barcode Scanner
速度很慢，样式不怎样
QR Scanner
速度快，样式随心所欲，直接在html里修改属于自己的样式
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 [ngClass]="{'qrscanner':isShow}" ><div [ngClass]="{'qrscanner-area':isShow}">    </div> <div  [ngClass]="{'through-line':isShow}"></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;//判断摄像头isShow: boolean = false;//控制显示背景，避免切换页面卡顿constructor(private navCtrl: NavController,private navParams: NavParams,private qrScanner: QRScanner,private viewCtrl: ViewController) {//默认为falsethis.light = false;this.frontCamera = false;}ionViewDidLoad() {this.qrScanner.prepare().then((status: QRScannerStatus) => {if (status.authorized) {// camera permission was granted// start scanninglet scanSub = this.qrScanner.scan().subscribe((text: string) => {alert(text);      this.qrScanner.hide(); // hide camera previewscanSub.unsubscribe(); // stop scanningthis.navCtrl.pop();});// show camera previewthis.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();this.isShow = true;//显示背景}/*** 闪光灯控制，默认关闭*/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() {    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');this.qrScanner.hide();//需要关闭扫描，否则相机一直开着this.qrScanner.destroy();//关闭}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无法正确显示相机画面。把它删除即可

作者：No刹那光辉
链接：https://www.jianshu.com/p/45f8b44b9a42
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

ionic3 使用QR Scaner 扫描相关推荐

Ionic二维码扫码插件QR Scanner不能扫描一维码问题
三款扫码插件优劣在Ionic开发中经常需要用到扫码功能,这个时候就需要用到二维码扫码插件. 目前市面上主要提供了三款扫码的插件,具体的可以参考如下链接: Ionic2入门教程(十三)带你走近3款二维 ...
Ionic二维码扫码插件QR Scanner不能扫描一维码问题（只解决了android）
三款扫码插件优劣在Ionic开发中经常需要用到扫码功能,这个时候就需要用到二维码扫码插件. 目前市面上主要提供了三款扫码的插件,具体的可以参考如下链接: Ionic2入门教程(十三)带你走近3款二维 ...
ionic3相关知识收集
启动相关 1. 修改端口以启动多个项目方法:使用ionic serve启动时,默认端口号为8100,修改这个端口号即可命令:ionic serve -p 8200 功能相关 1. 二维码功能 1.1 ...
运维开发工程师(BKDS)理论基础
运维开发工程师(BKDS)理论基础蓝鲸SaaS开发框架包含哪些Web防护策略? A. 防 CSRF 攻击 B. 防 XSS 攻击 C. 防 SQL注入 D. 没有Web安全防护正确答案:A,B,C ...
qr码是二维码码_如何使用QR码进行有效的营销和推广
qr码是二维码码 Efficient means doing things right. Effective is about doing the right things. 高效意味着做正确的事. ...
IONIC扫描二维码和一维码（条形码）
IONIC扫码目前有三个插件 : https://segmentfault.com/a/1190000012164809 该链接介绍的比较详细 ,下面采用的是 QR Scann ...
World Locking Tools for Unity Sample (二)QR Space Pins
World Locking Tools for Unity 基本配置示例场景部分工程资源环境配置打印二维码虚拟世界物理世界基本配置 World Locking Tools 的 Space ...
qr码是二维码码_SwiftUI中的相机预览和QR码扫描仪
qr码是二维码码 In this post, I will guide you through the creation of a QR-code scanner for iOS, using Swi ...
swift开源项目精选
Swift 开源项目精选-v1.0 2016-03-07 22:11 542人阅读评论(0) 收藏举报分类: iOS(55) Swift(4) 目录(?)[+] 转自 http://de ...

ionic3 使用QR Scaner 扫描

ionic3 使用QR Scaner 扫描相关推荐

最新文章

热门文章