前端開發中怎麼把連結轉為二維碼並展示？

山里看瓜發表於2024-11-15
前端

前言：

把一個連結生成一個二維碼圖片，這是我們前端非常常見的一個需求。那麼我們應該如何做呢？

檢視往期文章：

五分鐘一百行程式碼，手寫一個vue專案全域性通用的toast提示元件

十五分鐘兩百行程式碼，手寫一個vue專案全域性通用的彈框

第一步：下載 Qrcode 庫

npm install --save qrcode

第二步：準備容器

我們生成的二維碼圖片需要一個展示的容器，我們需要提前準備好。

<div id="qrCode"></div>

第三步：引入並使用

import QRCode from 'qrcode'

new QRCode(document.getElementById("qrCode"), {
    text: shareLink + "&p=qr_code&v=3", //生成二維碼的文字
    width: document.querySelector("#qrCode").offsetWidth,
    height: document.querySelector("#qrCode").offsetWidth,
    colorDark: "#333333", //二維碼顏色
    colorLight: "#ffffff", //二維碼背景色
    correctLevel: QRCode.CorrectLevel.L //容錯率，L/M/H
});

說明：

  1. 當你透過new呼叫之後就能生成要給二維碼圖片了，並且能夠顯示在你指定的容器當中；
  2. 因為我自己開發vue專案比較多，在vue專案中使用時，需要注意，最好放在 nextTick 中使用，保證容器渲染完成；
this.$nextTick(() => {
		new QRCode(document.getElementById("qrCode"), {
		text: shareLink + "&p=qr_code&v=3", //生成二維碼的文字
		width: document.querySelector("#qrCode").offsetWidth,
		height: document.querySelector("#qrCode").offsetWidth,
		colorDark: "#333333", //二維碼顏色
		colorLight: "#ffffff", //二維碼背景色
		correctLevel: QRCode.CorrectLevel.L //容錯率，L/M/H
	});
});

  1. correctLevel 容錯率說明：

    • 在二維碼（QR Code）的上下文中，容錯率（Correct Level）是一個非常重要的概念，它表示二維碼能在多大程度上被破損或遮擋而仍然能夠被成功掃描和解碼。容錯率的設定對於二維碼的實用性在實際應用中非常關鍵，尤其是在可能會遭受物理損害或部分遮擋的環境中。
    • 二維碼標準定義了四個容錯級別，每個級別都能容忍一定比例的二維碼影像損壞：
      1. L (Low) ：約7% 的錯誤可以被糾正。
      2. M (Medium) ：約15% 的錯誤可以被糾正。
      3. Q (Quartile) ：約25% 的錯誤可以被糾正。
      4. H (High) ：約30% 的錯誤可以被糾正。
    • 選擇更高的容錯級別會增加二維碼的複雜度和大小，因為需要加入更多的冗餘資料來實現錯誤校正。這意味著相同的資料內容，高容錯率的二維碼可能會比低容錯率的二維碼大或包含更密集的模組（黑點和白點）。
    • 如果二維碼不太可能受到損害或遮擋，並且空間有限，可以選擇較低的容錯率（如L或M）。
    • 如果二維碼可能會在較為惡劣的環境中使用，或者預計會有一部分被遮擋或破損，應選擇較高的容錯率（如Q或H），以確保二維碼仍然可讀。

寫在後面

這是一個通用的 qrcode 庫的通用使用流程，跟框架無關，你可以按照流程操作；

對你有幫助的話給作者點一個免費的關注吧，感恩！Peace and love~~

相關文章