使用javascript解析二維碼的三種方式
一、使用javascript解析二維碼
1、二維碼是什么
二維碼就是將我們能看懂的文字語(yǔ)言,以機(jī)器語(yǔ)言的形式存儲(chǔ)了起來(lái)。其中黑色小方塊代表的是1,白色小方塊代表的是0,黑白相間的圖案其實(shí)就是一串編碼,掃碼的過(guò)程就是翻譯這些編碼的過(guò)程。還要值得注意的地方就是,在它的邊上都有三個(gè)大方塊,這主要是在起定位作用。三個(gè)點(diǎn)能確定一個(gè)面,這能保證我們?cè)趻叽a時(shí),不管手機(jī)怎樣放置都能得到特定的信息
二、qrcode-parser
這是一個(gè)沒(méi)有依賴的二維碼前端解析工具。優(yōu)點(diǎn)是包小,輕量級(jí)工具,缺點(diǎn)不會(huì)調(diào)用攝像頭。需要編寫(xiě)調(diào)用攝像頭的代碼。
1、安裝方式
npm add qrcode-parser
2、使用方式
import qrcodeParser from 'qrcode-parser' let img = ''; qrcodeParser().then(res =>{ console.log(res) })
三、ngx-qrcode2
一個(gè)集成到angular
的二維碼生成工具。只能生成,不能讀取。
1、安裝方式
npm add ngx-qrcode2
2、使用方式
Appmodule 中導(dǎo)入模塊:
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中導(dǎo)入模塊:
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>
到此這篇關(guān)于使用javascript解析二維碼的三種方式的文章就介紹到這了,更多相關(guān)javascript解析二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序 后臺(tái)登錄(非微信賬號(hào))實(shí)例詳解
這篇文章主要介紹了微信小程序 后臺(tái)登錄(非微信賬號(hào))實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03JS前端canvas交互實(shí)現(xiàn)拖拽旋轉(zhuǎn)及縮放示例
這篇文章主要為大家介紹了JS前端canvas交互實(shí)現(xiàn)拖拽旋轉(zhuǎn)及縮放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JavaScript的function函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript的function函數(shù)詳細(xì),而我們的JavaScript腳本語(yǔ)言比較特殊,相對(duì)于C語(yǔ)言,它的參數(shù)是不需要數(shù)據(jù)類型加持的。返回值return,我就不過(guò)多描述,他是和 C語(yǔ)言通的,如果沒(méi)寫(xiě)他就會(huì)自動(dòng)返回undefined,下面一起來(lái)看看文章內(nèi)容,需要的朋友可以參考一下2021-11-11微信小程序獲取循環(huán)元素id以及wx.login登錄操作
這篇文章主要介紹了微信小程序獲取循環(huán)元素id以及wx.login登錄操作的相關(guān)資料,這里提供實(shí)例幫助大家實(shí)現(xiàn)該功能,需要的朋友可以參考下2017-08-08微信小程序 輪播圖swiper詳解及實(shí)例(源碼下載)
這篇文章主要介紹了微信小程序 輪播圖swiper詳解及實(shí)例(源碼下載)的相關(guān)資料,實(shí)用小技巧自定義輪播圖swiper dots默認(rèn)樣式,需要的朋友可以參考下2017-01-01