Location>code7788 >text

How to convert a link to a QR code and display it in front-end development?

Popularity：864 ℃/2024-11-15 09:57:44

Preface:

Generating a link into a QR code image is a very common requirement for our front-end. So how should we do it?

Check out past articles:

Five minutes and a hundred lines of code, handwriting a vue project global common toast prompt component

Fifteen minutes and two hundred lines of code, handwrite a vue project global common popup box

Step 1: DownloadQrcode storehouse

npm install --save qrcode

Step 2: Prepare the container

The QR code image we generate needs a container for display, which we need to prepare in advance.

<div ></div>

Step 3: Introduce and use

import QRCode from 'qrcode'

new QRCode(("qrCode"), {
    text: shareLink + "&p=qr_code&v=3", //generate text for QR code
    width: ("#qrCode").offsetWidth,
    height: ("#qrCode").offsetWidth, //Generate QR code text
    colorDark: "#333333", //QR code color
    colorLight: "#ffffff", //QR code background color
    correctLevel: //fault tolerance, L/M/H
}).

Description:

  1. When you call through the new will be able to generate to the QR code image, and can be displayed in the container you specify;
  2. Since I develop more vue projects myself, I need to be careful when using it in a vue project, it's best to put it in thenextTick is used to ensure that the container rendering is complete;
this.$nextTick(() => {
new QRCode(("qrCode"), {
text: shareLink + "&p=qr_code&v=3", //text for generating QR code
width: ("#qrCode").offsetWidth,
height: ("#qrCode").offsetWidth, //Generate QR code text
colorDark: "#333333", //QR code color
colorLight: "#ffffff", //QR code background color
correctLevel: //fault tolerance, L/M/H
});
}).

  1. correctLevel Fault Tolerance Notes:

    • In the context of QR Codes, Correct Level is a very important concept, which indicates the extent to which a QR Code can be damaged or obscured and still be successfully scanned and decoded. The setting of the Correct Level is critical to the utility of the QR Code in real-world applications, especially in environments where it may be physically damaged or partially obscured.
    • The QR code standard defines four fault tolerance levels, each of which tolerates a certain percentage of QR code image corruption:
      1. L (Low): About 7% of errors can be corrected.
      2. M (Medium): About 15% of errors can be corrected.
      3. Q (Quartile): About 25% of errors can be corrected.
      4. H (High): About 30% of errors can be corrected.
    • Choosing a higher fault tolerance level increases the complexity and size of the QR code because more redundant data needs to be added to achieve error correction. This means that for the same data content, a QR code with high fault tolerance may be larger or contain denser modules (black and white dots) than a QR code with low fault tolerance.
    • If the QR code is unlikely to be damaged or obscured and space is limited, a lower tolerance (e.g., L or M) may be chosen.
    • If the QR code is likely to be used in harsher environments, or if it is expected to be partially obscured or broken, a higher tolerance (e.g., Q or H) should be selected to ensure that the QR code remains readable.

Write it on the back.

This is a genericqrcode The generalized process for using the library has nothing to do with the framework and you can follow the process;

Give the author a free follow if it's helpful to you. Peace and love~~!

<Previous Next>