JS将网址转换成二维码的代码实例

最新推荐文章于 2025-10-24 12:43:48 发布

原创最新推荐文章于 2025-10-24 12:43:48 发布 · 981 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #JS转换二维码 #二维码 #视频二维码

文章存档同时被 2 个专栏收录

262 篇文章

订阅专栏

酷播视频二维码

16 篇文章

订阅专栏

使用 JavaScript 将网址转换成二维码的代码实例。这些示例通常依赖于第三方 JavaScript 二维码库。以下是方法：

1.使用 `qrcode.js` 库 (简单易用)

qrcode.js 是一个流行的、独立的 JavaScript 库，用于生成二维码。

1. 引入 qrcode.js 库:

你可以在你的 HTML 文件中通过 CDN 引入 qrcode.js：

<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>

或者，你也可以下载 qrcode.js 文件并将其包含在你的项目中：

<script src="path/to/qrcode.min.js"></script>

2. HTML 结构:

你需要一个 HTML 元素来显示生成的二维码，通常是一个 <div> 或 <canvas> 标签。

<div id="qrcode"></div>

3. JavaScript 代码:

const qrcodeDiv = document.getElementById('qrcode');
const urlToEncode = 'https://www.example.com/your-url'; // 将此替换为你想要编码的网址

const qrcode = new QRCode(qrcodeDiv, {
  text: urlToEncode,
  width: 128,
  height: 128,
  colorDark: '#000000',
  colorLight: '#ffffff',
  correctLevel: QRCode.CorrectLevel.L // L, M, Q, H
});

// 你也可以在控制台中查看生成的 data URL (Base64 编码的 PNG)
// console.log(qrcode._oQRCode.canvas.toDataURL());

代码解释:

document.getElementById('qrcode'): 获取用于显示二维码的 HTML 元素。
urlToEncode: 包含你想要转换成二维码的网址。
new QRCode(qrcodeDiv, { ... }): 创建一个 QRCode 实例。
- qrcodeDiv: 指定将二维码渲染到的 DOM 元素。
- text: 要编码的文本或 URL。
- width 和 height: 二维码的宽度和高度（像素）。
- colorDark: 二维码深色部分的颜色。
- colorLight: 二维码浅色部分的颜色。
- correctLevel: 纠错级别，可选值有 QRCode.CorrectLevel.L (低), QRCode.CorrectLevel.M (中), QRCode.CorrectLevel.Q (高), QRCode.CorrectLevel.H (最高)。纠错级别越高，容错能力越强，但二维码也会更复杂。
qrcode._oQRCode.canvas.toDataURL(): (可选) 获取生成的二维码图像的 Data URL (Base64 编码的 PNG 图片)。你可以在控制台中查看或将其用于 <img> 标签的 src 属性。