使用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)有依賴(là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)文章
詳解如何用js實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)版節(jié)拍器
這篇文章主要為大家介紹了詳解如何用js實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)版節(jié)拍器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
前端項(xiàng)目中監(jiān)聽(tīng)localStorage的變化
這篇文章主要為大家介紹了前端項(xiàng)目中監(jiān)聽(tīng)localStorage的變化的解決思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02
js基礎(chǔ)語(yǔ)法與maven項(xiàng)目配置教程案例
本篇文章介紹了幾個(gè)javascript的基本語(yǔ)法和maven的配置教程。想學(xué)習(xí)javascript和maven的朋友們可以參考一下,希望能給你帶來(lái)幫助2021-07-07
前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理
這篇文章主要為大家介紹了前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
詳解無(wú)界微前端是如何渲染子應(yīng)用的demo解析
這篇文章主要為大家介紹了詳解無(wú)界微前端是如何渲染子應(yīng)用demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖,詳細(xì)內(nèi)容請(qǐng)參考下面詳細(xì)內(nèi)容,希望對(duì)你有所幫助2021-11-11
微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
這篇文章主要介紹了微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例的相關(guān)資料,如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,需要的朋友可以參考下2017-09-09

