Three ways to parse QR codes using javascript

Three ways to parse QR codes using javascript

1. Use JavaScript to parse the QR code

1. What is a QR code?

The QR code stores the text language that we can understand in the form of machine language. The black square represents 1, the white square represents 0, and the black and white pattern is actually a string of codes. The process of scanning the code is the process of translating these codes. Another thing worth noting is that there are three large squares on its sides, which mainly serve as a positioning function. Three points can determine a surface, which ensures that when we scan the code, we can get specific information no matter how the phone is placed.

2.qrcode-parser

This is a QR code front-end parsing tool with no dependencies. The advantage is that it is a small package and a lightweight tool, but the disadvantage is that it does not call the camera. You need to write code to call the camera.

1. Installation method

npm add qrcode-parser

2. Usage

import qrcodeParser from 'qrcode-parser'

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

3. ngx-qrcode2

A QR code generation tool integrated into angular . Can only generate, not read.

1. Installation method

npm add ngx-qrcode2

2. Usage

Import the 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 the following 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. Generate QR code on the front end

1. Installation method

npm install @techiediaries/ngx-qrcode --save

2. Usage

Import the module 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 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>

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

This concludes this article on three ways to use javascript to parse QR codes. For more information on javascript parsing QR codes, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JavaScript+html implements random QR code verification on front-end pages
  • A brief discussion on the principle of js QR code scanning login
  • Sample code for generating QR code using js
  • Three.js sample code for making dynamic QR codes
  • Solve the problem that qrcode.js must define an empty div when generating a QR code
  • Implementation code for calling WeChat's QR code scanning function in js
  • JS realizes the function of scanning QR code with barcode scanner
  • How to generate a QR code with an image based on native javascript

<<:  Analysis of the principles of docker containers

>>:  Research on Web Page Size

Recommend

Docker container from entry to obsession (recommended)

1. What is Docker? Everyone knows about virtual m...

How to install docker using YUM

As shown in the following figure: If the version ...

HTML table tag tutorial (35): cross-column attribute COLSPAN

In a complex table structure, some cells span mul...

MySQL 8.0.12 winx64 detailed installation tutorial

This article shares the installation tutorial of ...

Method of implementing recursive components based on Vue technology

describe This article introduces a method to impl...

How to avoid garbled characters when importing external files (js/vbs/css)

In the page, external files such as js, css, etc. ...

Solution to the conflict between two tabs navigation in HTML

Let's start with a description of the problem...

JS uses the reduce() method to process tree structure data

Table of contents definition grammar Examples 1. ...

How MySQL handles implicit default values

Some students said that they encountered the prob...

JS implements the sample code of decimal conversion to hexadecimal

Preface When we write code, we occasionally encou...

Vue ElementUI implements asynchronous loading tree

This article example shares the specific code of ...

Angular Cookie read and write operation code

Angular Cookie read and write operations, the cod...