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

JavaScript implements the generation of 4-digit random verification code

This article example shares the specific code for...

Very practical Tomcat startup script implementation method

Preface There is a scenario where, for the sake o...

Examples of two ways to implement a horizontal scroll bar

Preface: During the project development, we encou...

How to use JSZip compression in CocosCreator

CocosCreator version: 2.4.2 Practical project app...

Tips for turning pixels into comprehensive brand experiences

Editor: This article discusses the role that inte...

Use the more, less, and cat commands in Linux to view file contents

In Linux, the commands cat, more, and less can al...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...

Detailed description of mysql replace into usage

The replace statement is generally similar to ins...

Some "pitfalls" of MySQL database upgrade

For commercial databases, database upgrade is a h...

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

In MySQL, you may encounter the problem of case s...

Implementation of React page turner (including front and back ends)

Table of contents front end According to the abov...

Mysql join table and id auto-increment example analysis

How to write join If you use left join, is the ta...