使用 JavaScript 解析二维码

1. ngx-qrcode-all
- 1.1. 安装
- 1.2. 使用
2. qrcode-parser
- 2.1. 安装
- 2.2. 使用
3. ngx-qrcode2
- 3.1. 安装
- 3.2. 使用
4. 参考链接

1 ngx-qrcode-all

1.1 安装

直接使用 yarn 安装

yarn add ngx-qrcode-all

1.2 使用

Appmodule 中导入模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { QrCodeAllModule } from 'ngx-qrcode-all';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        CommonModule,
        QrCodeAllModule
    ],
    declarations: [
        AppComponent
    ]
})
export class AppModule {
    constructor() {}
}

情况一：生成二维码的代码模板

<div id="qrcodeid">
 <qr-code-all [qrCodeType]="url"
     [qrCodeValue]="'SK is the best in the world!'"
     [qrCodeVersion]="'1'"
     [qrCodeECLevel]="'M'"
     [qrCodeColorLight]="'#ffffff'"
     [qrCodeColorDark]="'#000000'"
     [width]="11"
     [margin]="4"
     [scale]="4"
     [scanQrCode]="false">
 </qr-code-all>
</div>

情况二：读取二维码的代码模板

<div id="qrcodeid">
 <qr-code-all [canvasWidth]="640"
     [canvasHeight]="480"
     [debug]="false"
     [stopAfterScan]="true"
     [updateTime]="500"
     (onCapture)="captureImage($event)"
     [scanQrCode]="true">
 </qr-code-all>
</div>

2 qrcode-parser

一个没有依赖的二维码前端解析工具。优点是比较轻量级，缺点是不会调用摄像头，需要编写调用摄像头的代码。

2.1 安装

使用 qrcode-parser 包来解析二维码。直接使用 yarn 安装

yarn add qrcode-parser

2.2 使用

import qrcodeParser from 'qrcode-parser';

var imageUrl = '';

qrcodeParser(imageUrl).then(res => {
  document.getElementById('content').innerText = res.data
})

const fileElement = document.getElementById('file')
fileElement.addEventListener('change', () => {
  const file = fileElement.files[0]
  qrcodeParser(file).then(res => {
    document.getElementById('content').innerText = res.data
  })
}, false)

3 ngx-qrcode2

一个集成到 angular 的二维码生成工具。只能生成，不能读取。

3.1 安装

yarn add ngx-qrcode2

3.2 使用

Appmodule 中导入模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from 'ngx-qrcode2';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html 插入的模板

<div style="text-align:center">
  <h1>ngx-qrcode2 demo</h1>
</div>

<ngx-qrcode
      [qrc-element-type]="elementType"
      [qrc-value] = "value"
      qrc-class = "aclass"
      qrc-errorCorrectionLevel = "L">
</ngx-qrcode>

app.component.ts 中添加代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  elementType = 'url';
  value = 'Techiediaries';
}

4 参考链接

qrcode-parser: A pure javascript QR code reading library, accept File object, image url, base64.
qrcode parser live demo
ngx-qrcode-all

使用 JavaScript 解析二维码

Table of Contents

1 ngx-qrcode-all

1.1 安装

1.2 使用

2 qrcode-parser

2.1 安装

2.2 使用

3 ngx-qrcode2

3.1 安装

3.2 使用

4 参考链接