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
1. Overview There are three ways to create a Dock...
This article example shares the specific code for...
Preface There is a scenario where, for the sake o...
Preface: During the project development, we encou...
CocosCreator version: 2.4.2 Practical project app...
Editor: This article discusses the role that inte...
In Linux, the commands cat, more, and less can al...
This article example shares the specific code of ...
cause I recently started to refactor the project,...
The replace statement is generally similar to ins...
I encountered such a problem when doing the writte...
For commercial databases, database upgrade is a h...
In MySQL, you may encounter the problem of case s...
Table of contents front end According to the abov...
How to write join If you use left join, is the ta...