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
Table of contents 1. Plugins 2. Interlude 3. Impl...
cause The way to import external files into a min...
Sometimes, we don't want the content presente...
Table of contents 1. typeof 2. instanceof 3. Diff...
This article records the installation and configu...
Problem description: The Linux system's netwo...
Problem phenomenon I recently used sysbench to te...
Table of contents Functional Components How to wr...
Without going into details, let's go straight...
1. Installation Instructions Compared with local ...
The first and most important step is how to insta...
1. Time difference functions (TIMESTAMPDIFF, DATE...
Preface In the Linux kernel, netfilter is a subsy...
Table of contents # Post-data preparation # SQL q...
Table of contents Vue custom directive Custom dir...