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

Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

Table of contents 1. Plugins 2. Interlude 3. Impl...

How to reference external CSS files and iconfont in WeChat applet wxss

cause The way to import external files into a min...

Even a novice can understand the difference between typeof and instanceof in js

Table of contents 1. typeof 2. instanceof 3. Diff...

MySQL 8.0.15 installation and configuration graphic tutorial under Win10

This article records the installation and configu...

Cause Analysis and Solution of I/O Error When Deleting MySQL Table

Problem phenomenon I recently used sysbench to te...

Detailed explanation of incompatible changes of components in vue3

Table of contents Functional Components How to wr...

How to create a table by month in MySQL stored procedure

Without going into details, let's go straight...

Linux uses iptables to limit multiple IPs from accessing your server

Preface In the Linux kernel, netfilter is a subsy...

Detailed explanation of Vue custom instructions

Table of contents Vue custom directive Custom dir...