首页 > 其他分享 >插件:qrcode的使用

插件:qrcode的使用

时间:2024-06-02 18:29:19浏览次数:14  
标签:插件 err -- text QRCode 使用 qrcode options

源文档: qrcode文档

安装

npm install --save qrcode

TypeScript用户:如果您使用@types/qrcode,则需要在数据段上方添加//@ts ignore,因为它需要data:string。

用法

用法:qrcode〔options〕<input string>

二维码选项:
-v、 --qversion二维码符号版本(1-40)[编号]
-e、 --error纠错级别[选项:“L”、“M”、“Q”、“H”]
-m、 --掩码掩码模式(0-7)[数字]

渲染器选项:
-t、 --type输出类型[选项:“png”、“svg”、”utf8“]
-w、 --width图像宽度(px)[数字]
-s、 --比例比例因子[数字]
-q、 --qzone安静区域大小[number]
-l、 --lightcolor Light RGBA十六进制颜色
-d、 --深色深色RGBA十六进制颜色
--small将较小的二维码输出到终端[布尔值]

选项:
-o、 --输出输出文件
-h、 --help显示帮助[boolean]
--version显示版本号[布尔值]

示例:
qrcode“some text”在终端窗口中绘制
qrcode-o out.png“some text”另存为png图像
qrcode-d F00-o out.png“some text”使用红色作为前景色

如果未指定,则根据文件扩展名推测输出类型。可识别的扩展名有png、svg和txt。

API

浏览器端api

1.create()  创建二维码符号并返回一个二维码对象。

create(text, [options])

text: 要编码的文本或描述分段的对象列表。

options:  

 1.1 returns : object类型

// QRCode object
{
  modules,              // 具有模块数据的位矩阵类
  version,              // 二维码版本
  errorCorrectionLevel, // 纠错级别
  maskPattern,          // 计算的遮罩图案
  segments              // 生成的分段
}

2.toCanvas()   在画布上绘制二维码符号。

toCanvas(canvasElement,text,[options],[cb(error)])和 toCanvas(text, [options], [cb(error, canvas)]) ,如果省略了canvasElement,则返回一个新的画布。

2.1canvasElement: 画布绘制二维码绑定的dom元素。

2.2text:   要编码的文本或描述分段的对象列表。

2.3options: 

   2.3.1  cb:绘制完成时调用的回调函数

QRCode.toCanvas('text', { errorCorrectionLevel: 'H' }, function (err, canvas) {
  if (err) throw err

  var container = document.getElementById('container')
  container.appendChild(canvas)
})

节点qrcode可以通过Browserify和Webpack等模块捆绑器在浏览器中使用,也可以通过将预编译的捆绑包包含在构建/文件夹中来使用。 

<!-- index.html -->
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>
// index.js -> bundle.js
const QRCode = require('qrcode')
const canvas = document.getElementById('canvas')

QRCode.toCanvas(canvas, 'sample text', function (error) {
  if (error) console.error(error)
  console.log('success!');
})

ES6/ES7中使用(Promises和Async/Await可以用来代替回调函数)

import QRCode from 'qrcode'

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

 二进制数据

QR码可以保存基于任意字节的二进制数据。如果您试图通过首先将数据转换为JavaScript字符串来创建二进制QR码,它将无法正确编码,因为字符串编码会添加额外的字节。相反,您必须传递一个Uint8ClampedArray或兼容的数组,或一个Node Buffer,如下所示:

// Regular array example
// WARNING: Element values will be clamped to 0-255 even if your data contains higher values.
const QRCode = require('qrcode')
QRCode.toFile(
  'foo.png',
  [{ data: [253,254,255], mode: 'byte' }],
  ...options...,
  ...callback...
)
// Uint8ClampedArray example
const QRCode = require('qrcode')

QRCode.toFile(
  'foo.png',
  [{ data: new Uint8ClampedArray([253,254,255]), mode: 'byte' }],
  ...options...,
  ...callback...
)
// Node Buffer example
// WARNING: Element values will be clamped to 0-255 even if your data contains higher values.
const QRCode = require('qrcode')

QRCode.toFile(
  'foo.png',
  [{ data: Buffer.from([253,254,255]), mode: 'byte' }],
  ...options...,
  ...callback...
)

3.toDataURL()   返回包含二维码图像表示形式的数据URI。如果提供,canvasElement将被用作画布来生成数据URI。

toDataURL(文本,[选项],[cb(错误,url)])和  toDataURL(canvasElement,text,[options],[cb(error,url)])。

3.1 canvasElement: 画布绘制二维码绑定的dom元素。

3.2 text:   要编码的文本或描述分段的对象列表。

3.3 options: 

   3.3.1 type 

   类型: String
   可能的值有:images/png、images/jpeg、images/web。

   3.3.2  rendererOpts.quality: 

   类型: Number

   一个介于0和1之间的数字,如果请求的类型是image/jpeg或image/web,则表示图像质量。

   3.3.3  cb  绘制完成时调用的回调函数

const opts = {
  errorCorrectionLevel: 'H',
  type: 'image/jpeg',
  quality: 0.3,
  margin: 1,
  color: {
    dark:"#010599FF",
    light:"#FFBF60FF"
  }
}

QRCode.toDataURL('text', opts, function (err, url) {
  if (err) throw err

  var img = document.getElementById('image')
  img.src = url
})

4.toString()

toString(text,[options],[cb(error,string)])返回QR代码的字符串表示形式。

4.1 text:   要编码的文本或描述分段的对象列表。

4.2 options: 

      4.2.1 type

      类型: String

      可能的值有:terminal、utf8和svg。

      4.2.2  cb   绘制完成时调用的回调函数

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)
})

标签:插件,err,--,text,QRCode,使用,qrcode,options
From: https://blog.csdn.net/qq_55139096/article/details/139378019

相关文章

  • swiftUI使用VideoPlayer和AVPlayer播放视频
    使用VideoPlayer包播放视频:https://github.com/wxxsw/VideoPlayer提供一些可供测试的视频链接,不保证稳定可用哦:https://vfx.mtime.cn/Video/2019/06/15/mp4/190615103827358781.mp4https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4https://vfx.mtime.cn/Video/2019/......
  • URLSearchParams使用实践,URLSearchParams实现url参数字符转js对象,获取属性等功能
    constparams=newURLSearchParams();//实现js参数转urlcode编码,直接可以传到url去请求params.append('param1','value1');params.append('param2','value2');console.log(params.get('param1'))//获取到参数了consturlObject=ne......
  • 使用 Kali Linux 实现 Smurf 攻击
    一、介绍Smurf攻击是一种分布式拒绝服务(DDoS)攻击,利用IP协议中的ICMP(InternetControlMessageProtocol)请求和网络的广播特性,使目标系统被大量ICMP回复包淹没,从而导致系统无法正常提供服务。以下是对Smurf攻击的详细介绍:1.1攻击原理ICMPEcho请求:正常情况下,ICMPEcho请求......
  • 使用 Scapy 库编写 Ping of Death 攻击脚本
    一、介绍1.1概述PingofDeath(PoD)攻击是一种历史悠久的拒绝服务(DoS)攻击,攻击者通过发送特制的畸形ICMPEcho请求数据包,导致目标系统无法正确处理,从而导致系统崩溃、重启或无法响应正常请求。这种攻击利用了ICMP协议中的缺陷,在某些情况下可以绕过防火墙或其他安全措施。1.2......
  • 友元的讲解与使用
    友元的讲解与使用友元语法友元函数友元类**思考:c++是纯面向对象的吗?**运用练习类的主要特点之一是数据隐藏,即类的私有成员无法在类的外部(作用域之外)访问。但是,有时候需要在类的外部访问类的私有成员,怎么办?友元语法friend关键字只出现在声明处其他类、类成员函......
  • JAVA使用ForkJoinPool实现子任务拆分进行数值累加代码示例
      SumTask.javaimportjava.util.concurrent.RecursiveTask;/***定义任务和拆分逻辑*RecursiveTask<Long>这个是有返回值的*如果不需要返回值可以用RecursiveAction*/publicclassSumTaskextendsRecursiveTask<Long>{/***累加的开始值......
  • SpringBoot基于OpenAPI3的接口文档管理快速集成和使用
    你好,这里是codetrend专栏“SpringCloud2023实战”。本文主要简单介绍SpringCloud2023中进行接口文档管理,方便前后端开发和文档维护。文档管理工具基于开源的knife4j封装的openapi3。前言OpenAPI3.0(前身为Swagger)是一种RESTfulAPI文档规范。OpenAPI3.0规范是一种易于阅读和理......
  • python系列&AI系列:Gradio库的安装和使用教程
    Gradio库的安装和使用教程Gradio库的安装和使用教程一、Gradio库的安装二、Gradio的使用1、导入Gradio库2、创建Gradio接口3、添加接口到Gradio应用4、处理用户输入和模型输出5、关闭Gradio应用界面三、Gradio的高级用法1、多语言支持2、自定义输入和输出格式3、模型版......
  • 在 C# 中实现枚举的最佳使用
    一.介绍在C#编程语言中,枚举(enumeration)的缩写,是一种独特的数据类型,由一组命名常量(称为枚举器)组成。枚举用于建立一系列相互关联的整数常量,通过为这些常量分配描述性名称来增强代码的可读性和可管理性。二.C#中的枚举具有许多优点1.增强可读性和可维护性:枚举允许使用......
  • 如何在Spring中使用@Query注解?
    在Spring中,@Query注解是一种非常强大的工具,它允许你在Repository接口中直接定义查询语句。使用@Query注解,你可以执行JPQL(JavaPersistenceQueryLanguage)查询或者原生SQL查询,从而实现复杂的数据库查询而无需编写自定义的数据访问代码。使用@Query注解的基......