1. Install the qrcode.react plug-in

yarn add qrcode.react
// or 
npm install qrcode.react --save
Copy the code

2. Use the qrcode.react plug-in to generate the qrcode

  • The introduction of
import QRCode from 'qrcode.react';
Copy the code
  • use
<QRCode
    id="qrCode"
    value="https://www.jianshu.com/u/992656e8a8a6"
    size={200} // Size of the QR code
    fgColor="# 000000" // Color of the qr code
    style={{ margin: 'auto' }}
    imageSettings={{ // The logo in the middle of the qr code
        src: 'logoUrl'.height: 100.width: 100.excavate: true.// The middle image is hollow}} / >Copy the code

3. Download qr code

<a id="down_link" onClick={this.changeCanvasToPic}>Click on the download</a>
Copy the code
 changeCanvasToPic = () = > {
    const canvasImg = document.getElementById('qrCode'); // Get the canvas QR code
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); // Convert the Canvas object to the data URL of the image
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = 'QR code'; / / the name of that image
  };
Copy the code

4. Refresh periodically

The development of the project is the class check-in TWO-DIMENSIONAL code, added a three-second refresh function, may be to avoid a picture sign for a semester ，，，， ha ha ha…

The periodic refresh function is to use setInterval to update value value to update two-dimensional code, jump address behind spell a radomCode, radomCode periodic update, to achieve the two-dimensional code refresh, to timely clean up the timer.

Effect of 5.