图片实例:

简介:

  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生成二维码的更多相关文章

  1. jQuery和react实现二维码

    jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...

  2. Javascript生成二维码(QR)

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  3. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  4. iOS 生成二维码

    首先先下载生成二维码的支持文件 libqrencode 添加依赖库 CoreGraphics.framework. QuartzCore.framework.AVFoundation.framewor ...

  5. QR code 扩展生成二维码

    include './phpqrcode/phpqrcode.php';  //引入QR库 QRcode::png("leo", 'qrcode.png', 'L', 10);  ...

  6. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  7. C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)

    用C#如何生成二维码,我们可以通过现有的第三方dll直接来实现,下面列出几种不同的生成方法: 1):通过QrCodeNet(Gma.QrCodeNet.Encoding.dll)来实现 1.1):首先 ...

  8. 使用Spire.Barcode程序库生成二维码

    使用Spire.Barcode程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...

  9. C#运用ThoughtWorks生成二维码

    在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...

随机推荐

  1. tesonflow实现word2Vec

    word2Vec 是实现从原始语料中学习字词空间向量的预测模型 使用word2Vec的skip_Gram模型 import collections import math import os impo ...

  2. nginx的跨域设置

    官方文档 中说,只有当响应状态码为以下几种类型中之一时,add_header 才会生效.如果需要 add_header 在所有情况下都生效,可以在后面加上 always 参数即可解决. Adds th ...

  3. 为centos7配置阿里yum源遇到的问题以及解决方法

    [问题背景] 卸载安装的Ambari,之前都是因为卸载不干净.这次重写安装,卸载完之后,发现httpd无法启动,所以想卸载httpd进行重新安装,但是执行命令yum list | grep httpd ...

  4. 2018-2019-2 20165234 《网络对抗技术》 Exp9 Web安全基础

    Exp9 Web安全基础 一. 实践内容 1. 安装JDK.Webgoat 2. SQL注入攻击 数字型注入(Numeric SQL Injection) 日志欺骗(Log Spoofing) 字符串 ...

  5. python arcgis

  6. 《你不知道的JavaScript(上)》笔记——this全面解析

    首先要理解调用位置: 调用位置就是函数在代码中被调用的位置(而不是声明的位置). 最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数). 我们关心的调用位置就在当前正在执行的函数的前一个 ...

  7. linux redis 设置密码:

    在服务器上,这里以linux服务器为例,为redis配置密码. 1.第一种方式 (当前这种linux配置redis密码的方法是一种临时的,如果redis重启之后密码就会失效,) (1)首先进入redi ...

  8. win7下安装IIS7

    在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...

  9. ant design Table合并单元格合并单元格怎么用?

    1.ant design table合并单元格怎么用?

  10. 【ARTS】01_36_左耳听风-201900715~201900721

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...