使用 qrcode 生成二维码

qrcode

1 安装
2 引入
3 使用
- 3.1 方法1 ：QRCode.toCanvas()
- 3.2 方法2 ：QRCode.toDataURL()
4 完整示例

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成

1 安装

npm install --save qrcode

2 引入

import QRCode from 'qrcode';

如果您使用的 TypeScript，则在引入的时候可能会提示一下 error：

无法找到模块“qrcode”的声明文件。“C:/Users/shaoming/Desktop/swimxu/swim-react/node_modules/qrcode/lib/index.js”隐式拥有 “any” 类型。

尝试使用 npm i --save-dev @types/qrcode (如果存在)，或者添加一个包含 declare module 'qrcode'; 的新声明(.d.ts)文件ts(7016)

则需要安装 @types/qrcode，即可解决。

npm install --save @types/qrcode

3 使用

3.1 方法1 ：QRCode.toCanvas()

直接操作DOM，适合用于将二维码直接下载到本地。

<canvas id='canvas' />

const canvas = document.getElementById('canvas'); // 获取canvas节点
QRCode.toCanvas(canvas, '二维码中存储的数据内容'); // 绘制二维码

3.2 方法2 ：QRCode.toDataURL()

适合 react 使用。

<img src={imgUrl} />

const [imgUrl, setImgUrl] = useState('')
......QRCode.toDataURL('二维码中存储的数据内容', (error: Error | null | undefined, url: string) => {setImgUrl(url); // 将获取的url存到state中，方便img标签中使用
});

4 完整示例

React 使用 qrcode 实例：

import { useState } from 'react';
import { Button } from 'antd';
import QRCode from 'qrcode';const View = () => {const [imgUrl, setImgUrl] = useState('')const handleClick = async () => {const value = '二维码中存储的数据内容'const canvas = document.getElementById('canvas');QRCode.toCanvas(canvas, value);QRCode.toDataURL(value, (error: Error | null | undefined, url: string) => {setImgUrl(url);});}return (<div style={{ width: 240, margin: '100px auto', textAlign: 'center' }}><Buttontype='primary'onClick={handleClick}style={{ width: 240, margin: '40px auto' }}>点击生成二维码</Button><canvas id='canvas' /><img src={imgUrl} /></div >)
}export default View

使用 qrcode 生成二维码相关推荐

C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
关于QRCode生成二维码（背景图、Logo）
关于QRCode生成二维码的代码 /// <summary> /// 创建二维码 /// </summary> /// <param name="QRStrin ...
php使用Qrcode生成二维码
php使用Qrcode生成二维码首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...
用ThoughtWorks.QRCode生成二维码时出现“索引超出了数组界限”的错误
用ThoughtWorks.QRCode生成二维码时出现"索引超出了数组界限"的错误字符串较长的情况下,用ThoughtWorks.QRCode生成二维码时出现"索引超 ...
qrcode 生成二维码，带logo 带文字描述
qrcode 生成二维码 1.引入 pom.xml 2. ResourceRenderer 3. QRCodeUtil 4. QRCodeController 5. HTML 6. 测试 1.引入 p ...
C语言使用QRcode生成二维码
C语言使用QRcode生成二维码的简单操作首先需要QRcode源码包可以参考这位大神的文章: https://blog.csdn.net/qq_21475601/article/details/7 ...
qr-code 生成二维码
1.下载: composer require endroid/qr-code php: >=7.2 2.新建Qrcodes.php二维码生成类 use Endroid\QrCode\ErrorC ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
TP6使用qrcode生成二维码
经常会碰到系统根据地址生成二维码的使用场景,如健康码,分享商品,邀请用户注册等,使用qrcode生成二维码非常方便,它支持带logo或者不带,也可以设置二维码大小. composer require ...

使用 qrcode 生成二维码

qrcode

1 安装

2 引入

3 使用

3.1 方法1 ：QRCode.toCanvas()

3.2 方法2 ：QRCode.toDataURL()

4 完整示例

使用 qrcode 生成二维码相关推荐

最新文章

热门文章