react生成二维码
图片实例:
简介:
QRCode.js 是一个生成二维码的JS库。主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
用法:
1. 在项目中引入qrcode.min.js文件。 js文件网盘地址: https://pan.baidu.com/s/1kHB90FpMAJUvGvDNPpMm7Q 提取码: hkz4
2. 创建ref节点:
<div style={{ width, height }} ref={qrcodeRef} />
3. 在render中创建ref 提供一个dom节点:
const qrcodeRef = React.createRef();
4. 定义创建二维码的方法,以及调用:
function createdCode(id) {
new QRCode(qrcodeRef.current, {
text: `${url}?id=${id}`, // url or text
width, // 二维码宽度
height, // 二维码高度
colorDark, // 二维码颜色
colorLight, //二维码背景底色
correctLevel: QRCode.CorrectLevel.H, //层级等级
});
}
其他方法:
const [qrc, setQrcode] = useState(''); //state中定义qrcode function creatCoe() {
if(qrc) {
qrc.makeCode('text'); // 重新生成二维码
} else {
const qrcode = new QRCode(qrcodeRef.current, {
text,
width,
height,
colorDark,
colorLight,
correctLevel: QRCode.CorrectLevel.H,
});
setQrcode(qrcode); //在state中储存 qrcode
}
} qrc.clear(); //清除代码
这样就会生成一个base64的img,如果要下载功能,去除当前节点的base64图片的src即可!
QRCode.js ------------------------------------------------> GitHub地址
react生成二维码的更多相关文章
- jQuery和react实现二维码
jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- 使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...
- iOS 生成二维码
首先先下载生成二维码的支持文件 libqrencode 添加依赖库 CoreGraphics.framework. QuartzCore.framework.AVFoundation.framewor ...
- QR code 扩展生成二维码
include './phpqrcode/phpqrcode.php'; //引入QR库 QRcode::png("leo", 'qrcode.png', 'L', 10); ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)
用C#如何生成二维码,我们可以通过现有的第三方dll直接来实现,下面列出几种不同的生成方法: 1):通过QrCodeNet(Gma.QrCodeNet.Encoding.dll)来实现 1.1):首先 ...
- 使用Spire.Barcode程序库生成二维码
使用Spire.Barcode程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...
- C#运用ThoughtWorks生成二维码
在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...
随机推荐
- tesonflow实现word2Vec
word2Vec 是实现从原始语料中学习字词空间向量的预测模型 使用word2Vec的skip_Gram模型 import collections import math import os impo ...
- nginx的跨域设置
官方文档 中说,只有当响应状态码为以下几种类型中之一时,add_header 才会生效.如果需要 add_header 在所有情况下都生效,可以在后面加上 always 参数即可解决. Adds th ...
- 为centos7配置阿里yum源遇到的问题以及解决方法
[问题背景] 卸载安装的Ambari,之前都是因为卸载不干净.这次重写安装,卸载完之后,发现httpd无法启动,所以想卸载httpd进行重新安装,但是执行命令yum list | grep httpd ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp9 Web安全基础
Exp9 Web安全基础 一. 实践内容 1. 安装JDK.Webgoat 2. SQL注入攻击 数字型注入(Numeric SQL Injection) 日志欺骗(Log Spoofing) 字符串 ...
- python arcgis
- 《你不知道的JavaScript(上)》笔记——this全面解析
首先要理解调用位置: 调用位置就是函数在代码中被调用的位置(而不是声明的位置). 最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数). 我们关心的调用位置就在当前正在执行的函数的前一个 ...
- linux redis 设置密码:
在服务器上,这里以linux服务器为例,为redis配置密码. 1.第一种方式 (当前这种linux配置redis密码的方法是一种临时的,如果redis重启之后密码就会失效,) (1)首先进入redi ...
- win7下安装IIS7
在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...
- ant design Table合并单元格合并单元格怎么用?
1.ant design table合并单元格怎么用?
- 【ARTS】01_36_左耳听风-201900715~201900721
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...