|
一、使用javascript解析二维码
1、二维码是什么二维码就是将我们能看懂的文字语言，以机器语言的形式存储了起来。其中黑色小方块代表的是1，白色小方块代表的是0，黑白相间的图案其实就是一串编码，扫码的过程就是翻译这些编码的过程。还要值得注意的地方就是，在它的边上都有三个大方块，这主要是在起定位作用。三个点能确定一个面，这能保证我们在扫码时，不管手机怎样放置都能得到特定的信息
二、qrcode-parser这是一个没有依赖的二维码前端解析工具。优点是包小，轻量级工具,缺点不会调用摄像头。需要编写调用摄像头的代码。
1、安装方式
2、使用方式import qrcodeParser from 'qrcode-parser'let img = '';qrcodeParser().then(res =>{ console.log(res)})
三、ngx-qrcode2一个集成到angular的二维码生成工具。只能生成,不能读取。 1、安装方式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解析二维码内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
实现一个简单得数据响应系统
jquery项目中如何防重复提交详解 |
