React 前端生成二维码

安装组件:

`npm install qrcode.react --save`

引入组件:

`import QRCode from 'qrcode.react';`

## 生成二维码

```html

<QRCode

    value='https://www.baidu.com/'// 生成二维码的内容

    size={300} // 二维码的大小

    fgColor="#000000" // 二维码的颜色

    imageSettings={{ // 中间有图片logo

      src: logo,

      height: 60,

      width: 60,

      excavate: true

    }}

  />

</div>

```

![](https://user-gold-cdn.xitu.io/2019/12/3/16ecad05e04bdf0e?w=299&h=296&f=png&s=3681)

注意:

发现在浏览器中,imageSetting 图片和整体二维码的比例不能超过4:1,图片是在二维码的上方覆盖了一层,底层的二维码并没有改变,如果覆盖的比例过大,导致二维码扫描识别不了正确的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容