首页 > 其他 > 详细

react 使用 qrcode.react 插件生成二维码

时间:2021-05-19 16:50:30      阅读:30      评论:0      收藏:0      [点我收藏+]

react 使用qrcode.react插件生成二维码并下载

1. 安装qrcode.react插件

yarn add qrcode.react
// or 
npm install qrcode.react --save

2. 使用qrcode.react插件生成二维码

 .引用

import QRCode from qrcode.react;

    .使用

<QRCode
    id="qrCode"
    value="https://www.jianshu.com/u/992656e8a8a6"
    size={200} // 二维码的大小
    fgColor="#000000" // 二维码的颜色
    style={{ margin: auto }}
    imageSettings={{ // 二维码中间的logo图片
        src: logoUrl,
        height: 100,
        width: 100,
        excavate: true, // 中间图片所在的位置是否镂空
     }}
 />        

3. 下载二维码

<a id="down_link" onClick={this.changeCanvasToPic}>
    点击下载
</a>
 changeCanvasToPic = () => {
    const canvasImg = document.getElementById(qrCode); // 获取canvas类型的二维码
    const img = new Image();
    img.src = canvasImg.toDataURL(image/png); // 将canvas对象转换为图片的data url
    const downLink = document.getElementById(down_link);
    downLink.href = img.src;
    downLink.download = 二维码; // 图片name
  };

 

react 使用 qrcode.react 插件生成二维码

原文:https://www.cnblogs.com/fyh0912/p/14784792.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!