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

基于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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 设置DIV最小高度以及高度自适应随着内容的变化而变化

    设置 DIV 最小高度以及高度自适应随着内容的变化而变化,可以让页面元素更具灵活性和美观性,使页面内容在不同分辨率或浏览器大小的屏幕上呈现出类似的展示效果。下面是具体的操作步骤和示例说明: 设置 DIV 最小高度 通常情况下,我们需要设置 DIV 最小高度,避免内容不足时 DIV 的高度为 0,从而影响页面的美观性。可以使用以下代码设置 DIV 最小高度: …

    css 2023年6月9日
    00
  • 原生JS实现 MUI导航栏透明渐变效果

    下面是原生JS实现MUI导航栏透明渐变效果的完整攻略: 简介 在网页制作中,导航栏通常是一个非常重要的组件,既要实现美观又要实现良好的交互效果。其中,透明渐变效果可以让导航栏更加的漂亮、高大上,对于那些要求高质量的网页来说,它也是不可缺少的一个效果。下面,我们就来详细讲解如何通过原生JS来实现MUI导航栏透明渐变效果。 主要步骤 1. 获取导航栏的相关元素 …

    css 2023年6月10日
    00
  • 详解CSS中iconfont的使用

    详解CSS中iconfont的使用 什么是iconfont iconfont是一种将矢量图标转换成字体图标的技术,使用它可以方便的实现图标的展示并且可以像文字一样进行样式的处理。同时,iconfont的字体文件非常小,可以很大程度上提升网页性能。 如何使用iconfont Step 1: 获取图标库 首先,需要前往iconfont官网(http://www.…

    css 2023年6月9日
    00
  • XHTML教程,简单认识XHTML基础知识

    下面是“XHTML教程,简单认识XHTML基础知识”的完整攻略。 什么是XHTML? XHTML全称是可扩展超文本标记语言,是一种用于Web页面描述的标记语言。它目前被广泛使用于网络上,是最新的HTML发展标准。与HTML相比,XHTML更加严谨,更注重页面的结构和语义化。 XHTML的优点 相比传统的HTML,XHTML拥有以下优点: 严谨的语法规范,可以…

    css 2023年6月9日
    00
  • 使用html+css+js实现导航栏滚动渐变效果

    使用HTML+CSS+JS实现导航栏滚动渐变效果的攻略,可以分为以下几个步骤: HTML结构设计 先构建出导航栏的HTML结构,一般为 标签和若干个 标签,每个 标签代表导航栏的一个选项,同时为了实现滚动渐变效果,需要在导航栏外再添加一层 标签作为导航栏容器。 示例1:HTML代码: <div class="navbar"> …

    css 2023年6月9日
    00
  • css3实现波纹特效、H5实现动态波浪效果

    CSS3实现波纹特效攻略: 常用技术 CSS3 transform CSS3 animation CSS3 transition box-shadow 实现步骤 首先我们需要创建一个HTML元素,为了方便,我们可以选用button元素。 然后在CSS中设置该元素的基本样式,包括大小、颜色和位置等。 接下来,我们需要设置hover伪类,当该元素被hover时,…

    css 2023年6月10日
    00
  • CSS3制作炫酷的自定义发光文字

    下面是制作炫酷的自定义发光文字的完整攻略: 1. CSS3 文字阴影 CSS3 的文字阴影可以用来制作发光文字效果。具体实现方法如下: /* 添加文字阴影 */ text-shadow: 0 0 20px #fff; 这里的 text-shadow 属性接受四个参数,分别是: 横向偏移量 纵向偏移量 模糊度 颜色 可以通过调整这四个参数来控制文字阴影的效果。…

    css 2023年6月9日
    00
  • 信长之野望战国立志传 修改器怎么用 修改器下载及使用方法说明

    信长之野望战国立志传 修改器怎么用 信长之野望战国立志传是一款备受玩家喜爱的战略类游戏,由于其强大的游戏性和深入的历史背景,吸引了大量玩家的关注和喜爱。而在游戏中,修改器则是一个强大的辅助工具,可以帮助玩家快速获得游戏中的优势,提高游戏体验。在本篇攻略中,我们将详细讲解信长之野望战国立志传 修改器的使用方法,帮助玩家更好地享受游戏。 修改器下载及使用方法说明…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部