Three Ways of Parsing Two dimensional Code by javascript

Directory 1. Use javascript to parse 2D code1, what is 2D code2. qrcode-parser1, install mode 2, use mode 3. ngx-qrcode21, install mode 2, use mode 4. Front end generates 2D code1, install mode
2. Usage 3. Case 1: Code template for generating 2-dimensional code 4. Case 2: Reading 2-dimensional code

1. Parsing 2-D codes using javascript

What are 1, 2-dimensional codes

2D code is to store the written language we can understand in the form of machine language. Among them, 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 codes is the process of translating these codes. It is also worth noting that there are three large squares on its side, which are mainly used for positioning. Three points can determine one face, which can ensure that we can get specific information no matter how the mobile phone is placed when scanning the code

2. qrcode-parser

This is an independent 2D code front-end parsing tool. The advantage is that the package is small and lightweight, but the disadvantage is that the camera will not be called. You need to write the code to call the camera.

1. Installation method

npm add  qrcode-parser

2. How to use it

import qrcodeParser from 'qrcode-parser'

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

3. ngx-qrcode2

1 integrated into angular 2-D code generation tool. Can only be generated, not read.

1. Installation method

npm add ngx-qrcode2

2. How to use it

Import module 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 { }

app. component. html Inserted 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>

Add 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';
}

4. The front end generates 2D code

1. Installation method

npm install @techiediaries/ngx-qrcode --save

2. How to use it

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() {}
}

3. Case 1: Code template for generating 2-D 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>

4. Case 2: Reading 2D 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>