1. Use JavaScript to parse the QR code1. What is a QR code?
2.qrcode-parserThis 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 methodnpm add qrcode-parser 2. Usageimport qrcodeParser from 'qrcode-parser' let img = ''; qrcodeParser().then(res =>{ console.log(res) }) 3. ngx-qrcode2 A QR code generation tool integrated into 1. Installation methodnpm add ngx-qrcode2 2. UsageImport 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 methodnpm install @techiediaries/ngx-qrcode --save 2. UsageImport 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:
|
<<: Analysis of the principles of docker containers
Download the Java Development Kit jdk The downloa...
Table of contents Problem Description Solution Pr...
background Sometimes we need to get the creation ...
Back in the Kernel 2.6 era, a new security system...
Table of contents Requirements encountered in act...
To debug js code, you need to write debugger in t...
Table of contents 1. Introduction to v-slot 2. An...
Sometimes you may encounter a situation where a S...
Table of contents Preface The relationship betwee...
Preface This article mainly introduces the releva...
There are two ways to expose container ports in d...
Related articles: Install Docker using yum under ...
Displaying and interpreting information about you...
【question】 When the outer table and the inner tab...
Table of contents Master-slave replication mechan...