js 二维码生成|极客笔记

js 二维码生成

在现代社会中，二维码已经成为了一种非常方便快捷的信息传递工具。无论是在支付、活动报名、商品推广等场景下，我们都可以看到二维码的身影。那么在网页开发过程中，如何使用 JavaScript 来生成二维码呢？本文将带领大家详细介绍如何使用 JavaScript 生成二维码。

二维码的原理

在进行二维码生成之前，我们先简单了解一下二维码的原理。二维码本质是一种矩阵式数据编码符号，通过各种编码规则将文本、链接等信息编码成黑白交错的方块，从而实现二维码的功能。在生成二维码时，我们需要选择合适的库或 API 来实现编码和生成的过程。

使用 QRCodeJS 生成二维码

QRCodeJS 是一个简单易用的 JavaScript 库，可以帮助我们在网页中快速生成二维码。下面我们将演示如何使用 QRCodeJS 来生成一个包含文本信息的二维码。

首先，我们需要在 HTML 文件中引入 QRCodeJS 的 CDN 地址：

<!DOCTYPE html>
<html>
<head>
    <title>QRCode Generator</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script>
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "https://www.example.com",
            width: 128,
            height: 128
        });
    </script>
</body>
</html>

在上面的示例代码中，我们在页面中引入了 QRCodeJS 的 CDN 地址，并创建了一个 id 为 qrcode 的 div 元素，然后使用 JavaScript 代码创建了一个 QRCode 实例，并传入了要生成二维码的文本信息和尺寸大小。

运行上述代码，我们就可以在页面中看到一个包含指定文本信息的二维码了。

使用 QRCodeAPI 生成二维码

除了使用 JavaScript 库外，我们还可以通过调用第三方的二维码生成 API 来实现二维码的生成。这里以 QRCodeAPI 为例，演示如何通过该 API 在网页中生成二维码。

首先，我们需要注册并获取 QRCodeAPI 的访问密钥，然后可以通过发送 HTTP 请求来调用 API 生成二维码。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>QRCode Generator</title>
</head>
<body>
    <img id="qrcode" src="" alt="QRCode">
    <script>
        const apiKey = 'YOUR_API_KEY';
        const text = 'https://www.example.com';
        const size = 200;
        const url = `https://api.qrcodeapi.io/generate?text= ${text}&size=$ {size}&apiKey=${apiKey}`;

        const img = document.getElementById('qrcode');
        img.src = url;
    </script>
</body>
</html>

在上面的示例代码中，我们定义了一个包含 API 密钥、文本信息和尺寸大小的变量，并拼接了生成二维码的 API 请求 URL。然后将该 URL 赋值给 img 元素的 src 属性，即可在页面中显示生成的二维码图片。