插件:qrcode的使用

源文档: 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 errvar 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 errvar 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 errconsole.log(string)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/846147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TensorFlow与PyTorch:构建现代深度学习模型的两大支柱】

文章目录 前言TensorFlow与PyTorch的比较神经网络示例&#xff1a;手写数字识别结论 前言 进入深度学习世界的学习者和研究人员很快会遇到两个极具影响力的框架&#xff1a;TensorFlow和PyTorch。它们都提供了强大的工具和库&#xff0c;使得构建和训练复杂的深度学习模型变得…

新书推荐:11.6 调用约定

本节必须掌握的知识点&#xff1a; 函数调用约定 11.6.1 函数调用约定 什么是函数调用约定&#xff1f;就是告诉编译器&#xff1a;怎么传递参数&#xff0c;怎么传递返回值&#xff0c;怎么平衡堆栈&#xff0c;函数怎样命名。当一个程序中所有的函数都是自己实现的&#xf…

介绍谷歌开发工具中的 Application 面板

在现代 Web 开发中&#xff0c;浏览器开发工具&#xff08;DevTools&#xff09;是开发者的利器。谷歌 Chrome 的开发者工具提供了丰富的功能&#xff0c;帮助开发者调试、优化和分析他们的 Web 应用程序。本文将深入介绍 DevTools 中的 “Application” 面板&#xff0c;帮助你…

Spark SQL数据源 - Parquet文件

当使用Spark SQL处理Parquet文件时&#xff0c;你可以使用spark.read.parquet()方法从文件系统中加载Parquet数据到一个DataFrame中。Parquet是一种列式存储格式&#xff0c;非常适合用于大数据集&#xff0c;因为它提供了高效的压缩和编码方案。 以下是一个简单的例子&#x…

prometheus的rules配置

说明&#xff1a;本文介绍prometheus中的规则配置&#xff1b; 规则说明 groups:- name: MySQLAlertsrules:- alert: MysqlDownexpr: mysql_up 0for: 0mlabels:severity: criticalannotations:summary: MySQL down (实例&#xff1a;{{ $labels.instance }})description: &q…

VMware Workstation中WinXP联网问题

我一直以为我的虚拟机上的XP没有联网 因为 蒙了半天&#xff0c;发现是因为这个网址打不开&#xff0c;不是没有网 太傻了 不如在cmd命令行中通过ping baidu.com来判断是否联网

JavaScript中对象的增删改查

1. 增&#xff08;添加属性&#xff09; let obj {}; // 添加一个属性 obj.name John Doe; // 或者使用方括号语法添加属性&#xff08;这对于动态属性名很有用&#xff09; let propName age; obj[propName] 30; console.log(obj); // 输出: { name: John Doe, …

【康耐视国产案例】Nvidia/算能+智能AI相机:用AI驱动 | 降低电动车成本的未来之路

受环保观念影响、政府激励措施推动与新能源技术的发展&#xff0c;消费者对电动汽车(EV)的需求正在不断增长&#xff0c;电动汽车已经成为了未来出行方式的重要组成部分。然而&#xff0c;电动汽车大规模取代燃油汽车的道路还很漫长。最大的障碍就是电动汽车的售价相对过高。尽…

【Python面试50题】

1. **基础概念** 1. Python 是解释型还是编译型语言&#xff1f; 2. 什么是 Python 的 GIL&#xff08;全局解释器锁&#xff09;&#xff1f; 3. 如何理解 Python 中的可变与不可变数据类型&#xff1f; 4. 解释一下 Python 中的 pass 语句。 5. Python 中的列…

基于昇腾910B训练万亿参数的语言模型简介

基于昇腾910B训练万亿参数的语言模型 Abstract 在本工作中&#xff0c;作者开发了一个系统&#xff0c;该系统在Ascend 910 AI处理器集群和MindSpore框架上训练了一个万亿参数的语言模型&#xff0c;并提出了一个含有1.085T参数的语言模型&#xff0c;名为PanGu-。 从PanGu-[…

3.基础光照

从宏观上讲渲染包含了两大部分&#xff1a;决定一个像素的可见性&#xff0c;决定一个像素的光照计算 而光照模型就是用于决定在一个像素上决定怎样的渲染光照计算。 一、我们是如何看到这个世界的 1.光源 实时渲染中&#xff0c;我们通常把光源当成一个没有体积的点&#…

远程服务器上,再次配笔记1、2、11、12相同的深度学习和gcc环境

文章目录 参考文献 创建环境在(zgp_m3dm)中安装会显示zgp_m3dm_main环境中的情况满足(base) ~/zgp/M3DM-repetition conda deactivate 再次安装如果服务器本身不能联网&#xff0c;需下载pysocks包以设置反向代理&#xff08;具体可参考之前的笔记10&#xff09;&#xff1a; 再…

简易版本的QFD质量屋

比如餐馆要考虑什么因素最重要&#xff0c;这里列出好吃&#xff0c;快速&#xff0c;便宜三类问题&#xff0c;然后设置上图的权重&#xff0c; 然后设置9&#xff0c;3&#xff0c;1三类因子&#xff0c;9比如是最重要的&#xff0c;3&#xff0c;1&#xff0c;依次没那么重要…

[vue2项目]vue2+supermap[mapboxgl]+天地图之地图的初始化

Supermap参考教程 天地图 一、安装 1、终端:npm install supermap/vue-iclient-mapboxgl 2、在package.json文件的dependencies查看supermap/vue-iclient-mapboxgl依赖是否安装成功。 3、在mian.js全局引入 import VueiClient from supermap/vue-iclient-mapboxgl; Vue.use(…

stm32和nrf24L01病房呼叫系统的实现

stm32和nrf24L01病房呼叫系统的实现 文章目录 stm32和nrf24L01病房呼叫系统的实现第一章 项目背景与意义第一节 病房呼叫系统的现状1.技术现状2.存在的问题 第二节 STM32F1、nRF24L01、OLED技术介绍1.STM32F1技术介绍2.nRF24L01技术介绍3.OLED技术介绍 第三节 项目目标与预期成…

牛客网刷题 | BC106 K形图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…

Java 基础面试300题 (201-230)

Java 基础面试300题 &#xff08;201-230&#xff09; 201.下面代码片段的输出是什么&#xff1f; Predicate<Integer> numberChecker (num)–> num > 20; int input 10; System.out.println(input” greater than 20–”numberChecker.test(input)); //Line 1…

perl: URI::rtsp 是用来处理RTSP协议的的URI的模块。

在Perl中&#xff0c;URI::rtsp 是用来处理RTSP&#xff08;Real Time Streaming Protocol&#xff0c;实时流协议&#xff09;的URI的模块。 以下是一些使用 URI::rtsp 的方法&#xff1a; 1.创建一个RTSP URI use URI::rtsp;my $uri URI::rtsp->new("rtsp://user…

WPS部分快捷操作汇总

记录一些个人常用的WPS快捷操作 一、去除文档中所有的超链接&#xff1a; 1、用WPS打开文档&#xff1b; 2、用Ctrla全选&#xff0c;或者点击上方的【选择】-【全选】&#xff0c;选中文档全部内容&#xff1b; 3、按CTRLSHIFTF9组合键&#xff0c;即可一次性将取文档中所有…

AI学习指南机器学习篇-线性回归统计推断

AI学习指南机器学习篇-线性回归统计推断 在机器学习领域&#xff0c;线性回归模型是最为常见且基础的模型之一。而统计推断则是为了更好地理解数据背后的规律而产生的一门重要学科。本文将探讨线性回归模型与统计推断的关系&#xff0c;重点讨论参数估计的置信区间和假设检验。…