js 二维码|极客笔记

js 二维码

在现代社会中，二维码已成为一种方便快捷的信息传递方式。无论是支付、广告宣传还是活动参与，我们都可以看到二维码的身影。那么，如何利用代码来生成二维码呢？本文将介绍几种常见的生成二维码的方法，帮助大家快速实现二维码的生成功能。

使用JavaScript生成二维码

1. 使用第三方库

在JavaScript中，我们可以通过引入第三方库来生成二维码。其中，qrcode.js是一个非常流行的库，可以帮助我们快速生成二维码。首先，我们需要在HTML文件中引入该库：

<!DOCTYPE html>
<html>
<head>
  <title>生成二维码示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <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://example.com",
    width: 128,
    height: 128
  });
</script>

</body>
</html>

在上面的示例中，我们引入了jQuery和qrcode.js库，并使用QRCode构造函数来生成一个指向https://example.com链接的二维码。生成的二维码将会显示在页面中的qrcode元素中，具有128×128的尺寸。

2. 纯JavaScript生成

除了依赖第三方库外，我们还可以使用纯JavaScript来生成二维码。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>生成二维码示例</title>
</head>
<body>

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

<script>
  function generateQRCode(text, width, height) {
    var qrCanvas = document.createElement('canvas');
    var qrContext = qrCanvas.getContext('2d');
    var qrCode = new QRCode(-1, QRCode.CorrectLevel.H);
    qrCode.addData(text);
    qrCode.make();
    qrCanvas.width = width;
    qrCanvas.height = height;
    qrCode.renderTo2dContext(qrContext, width, height);
    document.getElementById('qrcode').appendChild(qrCanvas);
  }

  generateQRCode('https://example.com', 128, 128);
</script>

</body>
</html>

在上面的示例中，我们定义了一个generateQRCode函数，接受文本、宽度和高度等参数，并使用QRCode库的函数来生成二维码。最后，将生成的二维码显示在页面上。