使用javascript解析二维码的三种方式


Posted in Javascript onNovember 11, 2021

一、使用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解析二维码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
实现一个简单得数据响应系统
Nov 11 #Javascript
JavaScript函数柯里化
Nov 07 #Javascript
JS数组去重详情
Nov 07 #Javascript
手写实现JS中的new
Nov 07 #Javascript
用JS写一个发布订阅模式
Nov 07 #Javascript
浅谈JavaScript浅拷贝和深拷贝
JavaScript严格模式不支持八进制的问题讲解
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
如何提高数据访问速度
2016/12/26 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
vue生命周期的探索
2019/04/03 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
美术学专业求职信
2014/07/23 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
新闻稿格式范文
2015/07/18 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
分析并发编程之LongAdder原理
2021/06/29 Java/Android
php去除deprecated的实例方法
2021/11/17 PHP