使用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 相关文章推荐
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
实现一个简单得数据响应系统
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
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
js读写json文件实例代码
2014/10/21 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
Python实现的tab文件操作类分享
2014/11/20 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
银行批评与自我批评
2014/02/10 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
西柏坡导游词
2015/02/05 职场文书
保留意见审计报告
2015/06/05 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Python实现拼音转换
2021/06/07 Python