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

 更新时间:2021年11月08日 11:02:21   作者:zz  
这篇文章主要给大家分享使用javascript解析二维码的三种方式,二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来。其中黑色小方块代表的是1,白色小方块代表的是0,黑白相间的图案其实就是一串编码,扫码的过程就是翻译这些编码的过程,需要的朋友可以参考一下

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

相关文章

  • 微信小程序 后台登录(非微信账号)实例详解

    微信小程序 后台登录(非微信账号)实例详解

    这篇文章主要介绍了微信小程序 后台登录(非微信账号)实例详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • 微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解

    这篇文章主要介绍了 微信小程序点击控件修改样式实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • 制作特殊字的脚本

    制作特殊字的脚本

    制作特殊字的脚本...
    2006-06-06
  • JS前端canvas交互实现拖拽旋转及缩放示例

    JS前端canvas交互实现拖拽旋转及缩放示例

    这篇文章主要为大家介绍了JS前端canvas交互实现拖拽旋转及缩放示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    这篇文章主要介绍了JavaScript的function函数详细,而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的。返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined,下面一起来看看文章内容,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 引用其他js文件实现代码

    微信小程序 引用其他js文件实现代码

    这篇文章主要介绍了微信小程序 引用其他js文件实现代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • 微信小程序获取循环元素id以及wx.login登录操作

    微信小程序获取循环元素id以及wx.login登录操作

    这篇文章主要介绍了微信小程序获取循环元素id以及wx.login登录操作的相关资料,这里提供实例帮助大家实现该功能,需要的朋友可以参考下
    2017-08-08
  • 手写实现JS中的new

    手写实现JS中的new

    这篇文章主要介绍JS中的new,new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。下面我们一起来看看我呢很脏具体内容的详细介绍,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 轮播图swiper详解及实例(源码下载)

    微信小程序 轮播图swiper详解及实例(源码下载)

    这篇文章主要介绍了微信小程序 轮播图swiper详解及实例(源码下载)的相关资料,实用小技巧自定义轮播图swiper dots默认样式,需要的朋友可以参考下
    2017-01-01
  • JS开发 富文本编辑器TinyMCE详解

    JS开发 富文本编辑器TinyMCE详解

    这篇文章主要介绍了Java开发 富文本编辑器TinyMCE详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论