使用javascript解析二維碼的三種方式
一、使用javascript解析二維碼
1、二維碼是什麼
二維碼就是將我們能看懂的文字語言,以機器語言的形式存儲瞭起來。其中黑色小方塊代表的是1,白色小方塊代表的是0,黑白相間的圖案其實就是一串編碼,掃碼的過程就是翻譯這些編碼的過程。還要值得註意的地方就是,在它的邊上都有三個大方塊,這主要是在起定位作用。三個點能確定一個面,這能保證我們在掃碼時,不管手機怎樣放置都能得到特定的信息
二、qrcode-parser
這是一個沒有依賴的二維碼前端解析工具。優點是包小,輕量級工具,缺點不會調用攝像頭。需要編寫調用攝像頭的代碼。
1、安裝方式
npm add qrcode-parser
2、使用方式
import qrcodeParser from 'qrcode-parser' let img = ''; qrcodeParser().then(res =>{ console.log(res) })
三、ngx-qrcode2
一個集成到angular
的二維碼生成工具。隻能生成,不能讀取。
1、安裝方式
npm add ngx-qrcode2
2、使用方式
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 插入的模板:
<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>
在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'; }
四、前端生成二維碼
1、安裝方式
npm install @techiediaries/ngx-qrcode --save
2、使用方式
在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、案例一:生成二維碼的代碼模板
<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、案例二:讀取二維碼
<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>
到此這篇關於使用javascript解析二維碼的三種方式的文章就介紹到這瞭,更多相關javascript解析二維碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Angular項目中共享模塊的實現
- 簡單談談Angular中的獨立組件的使用
- 詳解Angular之路由基礎
- 使用Angular CDK實現一個Service彈出Toast組件功能
- 從 Angular Route 中提前獲取數據的方法詳解