前端开发中怎么把链接转为二维码并展示？

news2024/11/15 11:20:57

前言：

把一个链接生成一个二维码图片，这是我们前端非常常见的一个需求。那么我们应该如何做呢？

查看系列往期文章：

五分钟一百行代码，手写一个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
});

说明：

当你通过new调用之后就能生成要给二维码图片了，然后就能够显示在你指定的容器当中；
因为我自己开发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
	});
});

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），以确保二维码仍然可读。