javascript解析二维码 使用javascript解析二维码的三种方式
zz 人气:2想了解使用javascript解析二维码的三种方式的相关内容吗，zz在本文为您仔细讲解javascript解析二维码的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：javascript解析二维码方式,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>
加载全部内容