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

Configure Java development environment in Ubuntu 20.04 LTS

Download the Java Development Kit jdk The downloa...

Why the disk space is not released after deleting data in MySQL

Table of contents Problem Description Solution Pr...

Getting the creation time of a file under Linux and a practical tutorial

background Sometimes we need to get the creation ...

SELinux Getting Started

Back in the Kernel 2.6 era, a new security system...

Vue Router loads different components according to background data

Table of contents Requirements encountered in act...

Detailed steps for debugging VUE projects in IDEA

To debug js code, you need to write debugger in t...

Vue3 slot usage summary

Table of contents 1. Introduction to v-slot 2. An...

Reasons for the sudden drop in MySQL performance

Sometimes you may encounter a situation where a S...

How much do you know about JavaScript inheritance?

Table of contents Preface The relationship betwee...

Detailed explanation of the difference between docker-compose ports and expose

There are two ways to expose container ports in d...

How to decrypt Linux version information

Displaying and interpreting information about you...

Solutions to the problem of table nesting and border merging

【question】 When the outer table and the inner tab...

Comprehensive analysis of MySql master-slave replication mechanism

Table of contents Master-slave replication mechan...