Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Parse the QR code using javascript

What is qr code

Two-dimensional code is that we can understand the text language, in the form of machine language stored up. The small black square represents 1, and the small white square represents 0. The black and white pattern is actually a string of codes, and the process of scanning code is the process of translating these codes. It is also worth noting that there are three big squares on the edge of it, which is mainly used for positioning. Three dots identify a face, which ensures that when we scan, no matter where the phone is placed, we get a specific message, right

qrcode-parser

This is a two-dimensional code front-end parsing tool without dependence. Advantages are small package, lightweight tools, disadvantages do not call the camera. You need to write code to call the camera.

installation

npm add  qrcode-parser
Copy the code

use

import qrcodeParser from 'qrcode-parser'

let img = ' ';
qrcodeParser().then(res= >{
    console.log(res)
})
Copy the code

ngx-qrcode2

An integrated Angular QR code generation tool. Can only be generated, not read.

installation
npm add ngx-qrcode2
Copy the code

use

Import modules in 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 {}Copy the code

App.component.html insert template

<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>
Copy the code

Add the code in 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';
}
Copy the code

Front-end generation of TWO-DIMENSIONAL code

installation

npm install @techiediaries/ngx-qrcode --save
Copy the code

use

Import modules in 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(){}}Copy the code

Case 1: Generate the code template of the QR code

<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>
Copy the code

Case 2: Reading two-dimensional code

<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>
Copy the code