Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Parse the QR code using javascript
What is qr code
Two-dimensional code is that we can understand the text language, in the form of machine language stored up. The small black square represents 1, and the small white square represents 0. The black and white pattern is actually a string of codes, and the process of scanning code is the process of translating these codes. It is also worth noting that there are three big squares on the edge of it, which is mainly used for positioning. Three dots identify a face, which ensures that when we scan, no matter where the phone is placed, we get a specific message, right
qrcode-parser
This is a two-dimensional code front-end parsing tool without dependence. Advantages are small package, lightweight tools, disadvantages do not call the camera. You need to write code to call the camera.
installation
npm add qrcode-parser
Copy the code
use
import qrcodeParser from 'qrcode-parser'
let img = ' ';
qrcodeParser().then(res= >{
console.log(res)
})
Copy the code
ngx-qrcode2
An integrated Angular QR code generation tool. Can only be generated, not read.
installation
npm add ngx-qrcode2
Copy the code
use
Import modules 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 {}Copy the code
App.component.html insert 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>
Copy the code
Add the 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';
}
Copy the code
Front-end generation of TWO-DIMENSIONAL code
installation
npm install @techiediaries/ngx-qrcode --save
Copy the code
use
Import modules 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(){}}Copy the code
Case 1: Generate the code template of the 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>
Copy the code
Case 2: Reading two-dimensional 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>
Copy the code