react 項目里 生成帶logo的二維碼


1.安裝模塊

npm install qrcode-react
// 或者
yarn add qrcode-react

2.屬性介紹

size             二維碼大小  number
bgColor       二維碼背景色string (CSS顏色)"#FFFFFF"
fgColor        顏色 string (CSS顏色)
logo             圖片地址 string
logoWidth    二維碼寬度 number 
logoHeight   二維碼高度  number

項目代碼:(注意:value值最好不要帶中文,否則會出現不能掃描的情況)
3.頁面調用

/***
 * 掃碼預覽
 */
import React, { PureComponent } from 'react';
import QRCode from 'qrcode-react';
import './index.less';

class QrcodeModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    return (
      <div>
        <QRCode
          size={150}
          value={`https://www.baidu.com`}
          logo={`https://www.baidu.com/img/baidu_jgylogo3.gif`}
          logoWidth={50}
          logoHeight={50}
        />
      </div>
    );
  }
}

export default QrcodeModal;

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM