基于JS实现二维码名片生成的示例代码

简介

本文将介绍如何使用JavaScript编写代码来生成二维码名片。这样的应用程序可以方便地将个人或商业信息分享给其他人。一些示例将帮助您更好地理解如何使用JavaScript来生成二维码名片。

准备工作

在开始编写JavaScript代码之前，您需要在网页中引入QRCode.js库。通过在HTML文件中引入QRCode.js库，您可以轻松编写代码来生成二维码名片。

<!DOCTYPE html>
<html>
  <head>
    <title>二维码名片生成器</title>
  </head>
  <body>
    <h1>二维码名片生成器</h1>
    <input type="text" id="qrtext" placeholder="请输入您的名片信息">
    <button onclick="generateQR()">生成二维码</button>
    <div id="qrcode"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

在上面的代码中，我们引入了QRCode.js库。以下是我们代码中的核心JavaScript代码。

function generateQR() {
  const qrtext = document.getElementById('qrtext').value.trim();
  if (!qrtext) {
    alert('请输入有效信息');
    return;
  }
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: qrtext,
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  });
}

看一下最上面的代码，我们为页面添加了一个输入框和一个生成二维码的按钮。然后，我们在页面中添加了一个div元素，它是用于将生成的二维码显示出来的。

在JavaScript函数generateQR()中，我们首先获取了用户输入的信息，并对其进行了一些值检查。接着，我们创建了一个QRCode对象，并传递了必要的参数。最后，我们将二维码显示到页面上。

示例说明

让我们看下面两个示例：

示例1：生成文本二维码名片

以下是一个示例，它演示了如何为纯文本信息创建二维码名片。

<!DOCTYPE html>
<html>
  <head>
    <title>文本二维码名片生成器</title>
  </head>
  <body>
    <h1>文本二维码名片生成器</h1>
    <input type="text" id="qrtext" placeholder="请输入您的名片信息">
    <button onclick="generateQR()">生成二维码</button>
    <div id="qrcode"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
      function generateQR() {
        const qrtext = document.getElementById('qrtext').value.trim();
        if (!qrtext) {
          alert('请输入有效信息');
          return;
        }
        var qrcode = new QRCode(document.getElementById("qrcode"), {
          text: qrtext,
          width: 200,
          height: 200,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
        });
      }
    </script>
  </body>
</html>

在这个示例中，我们有一个页面，用户可以在该页面中输入他们的名片信息。当他们单击“生成二维码”按钮时，JavaScript将创建一个QRCode对象，并将其作为二维码显示。

示例2：生成带有Logo的二维码名片

以下示例演示了如何添加带有公司文本和Logo的二维码名片。

<!DOCTYPE html>
<html>
  <head>
    <title>带有Logo的二维码名片生成器</title>
  </head>
  <body>
    <h1>带有Logo的二维码名片生成器</h1>
    <input type="text" id="qrtext" placeholder="请输入您的名片信息">
    <input type="file" id="logoImage" accept="image/*" onchange="loadFile(event)">
    <button onclick="generateQR()">生成二维码</button>
    <div id="qrcode"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
      let imgData;

      function generateQR() {
        const qrtext = document.getElementById('qrtext').value.trim();
        if (!qrtext) {
          alert('请输入有效信息');
          return;
        }
        var canvas = document.createElement("canvas");

        QRCode.toCanvas(canvas, qrtext, {
          width: 200,
          height: 200,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
        }, function(error) {
          if (error) console.error(error);
          let ctx = canvas.getContext('2d');
          if (imgData) {
            const img = new Image();
            img.src = imgData;
            img.onload = function () {
              const imgWidth = 40,
                    imgHeight = 40;
              let x = (canvas.width - imgWidth) / 2,
                  y = (canvas.height - imgHeight) / 2;

              ctx.drawImage(this, x, y, imgWidth, imgHeight);
              document.getElementById("qrcode").innerHTML = "<img src='"+canvas.toDataURL()+"'>";
            };
          } else {
            document.getElementById("qrcode").innerHTML = "<img src='"+canvas.toDataURL()+"'>";
          }       
        });
      }

      function loadFile(event) {
        const reader = new FileReader();
        reader.onload = function() {
          imgData = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
      }
    </script>
  </body>
</html>

在这个示例中，我们提供了一个上传文件的区域，允许用户上传公司Logo。我们在JavaScript代码中添加了一个新的函数loadFile()，用于检索选定的图像文件的数据URL。当用户单击“生成QR码”按钮时，JavaScript使用QRCode.js库创建Canvas，并在该Canvas中创建QR码。如果用户已经上传了Logo，则将Logo添加到Canvas中。最后，我们将Canvas转换为图像，并将其显示在HTML div元素中，以便将其展示给用户。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS实现二维码名片生成的示例代码 - Python技术站

基于JS实现二维码名片生成的示例代码