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. What is Docker? Everyone knows about virtual m...
As shown in the following figure: If the version ...
In a complex table structure, some cells span mul...
This article shares the installation tutorial of ...
Querying the database SELECT * FROM `student` Que...
describe This article introduces a method to impl...
In the page, external files such as js, css, etc. ...
Let's start with a description of the problem...
css3 background image related Compatibility: IE9+...
Table of contents Problem Overview Problem Reprod...
Table of contents definition grammar Examples 1. ...
Some students said that they encountered the prob...
Preface When we write code, we occasionally encou...
This article example shares the specific code of ...
Angular Cookie read and write operations, the cod...