脚本宝典收集整理的这篇文章主要介绍了使用javascript解析二维码的三种方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
二维码就是将我们能看懂的文字语言，以机器语言的形式存储了起来。其中黑色小方块代表的是1，白色小方块代表的是0，黑白相间的图案其实就是一串编码，扫码的过程就是翻译这些编码的过程。还要值得注意的地方就是，在它的边上都有三个大方块，这主要是在起定位作用。三个点能确定一个面，这能保证我们在扫码时，不管手机怎样放置都能得到特定的信息
这是一个没有依赖的二维码前端解析工具。优点是包小，轻量级工具,缺点不会调用摄像头。需要编写调用摄像头的代码。
npm add qrcode-parser
import qrcodeParser From 'qrcode-parser' let img = ''; qrcodeParser().then(res =>{ console.LOG(res) })
一个集成到Angular的二维码生成工具。只能生成,不能读取。
npm add ngx-qrcode2
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';
}
npm install @techiediaries/ngx-qrcode --save
在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() {}
}
<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>
<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解析二维码内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的使用javascript解析二维码的三种方式全部内容，希望文章能够帮你解决使用javascript解析二维码的三种方式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。