使用javascript解析二维码的三种方式_JavaScript
这篇文章主要给大家分享使用javascript解析二维码的三种方式，二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来。其中黑色小方块代表的是1,白色小方块代表的是0，黑白相间的图案其实就是一串编码,扫码的过程就是翻译这些编码的过程,需要的朋友可以参考一下
目录
一、使用javascript解析二维码1、二维码是什么二、qrcode-parser1、安装方式2、使用方式三、ngx-qrcode21、安装方式2、使用方式四、前端生成二维码1、安装方式2、使用方式3、案例一：生成二维码的代码模板4、案例二：读取二维码
一、使用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解析二维码内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
