二维码生成

最新推荐文章于 2024-06-24 11:05:01 发布

呆毛没了

最新推荐文章于 2024-06-24 11:05:01 发布

阅读量946

点赞数 36

文章标签： javascript 前端 html vue html5

本文链接：https://blog.csdn.net/weixin_48635632/article/details/139852100

版权

一，纯JavaScript生成二维码

下面是一个使用纯JavaScript生成二维码的例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #qrcode {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="qrcode"></div>

    <script>
      function generateQRCode(text, size) {
        var qrCode = document.getElementById('qrcode');
        qrCode.innerHTML = "";

        // 创建二维码的 canvas 元素
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = size;
        canvas.height = size;

        // 使用 QR 算法生成二维码图像数据
        var qrData = qrCodeData(text);
        var cellSize = Math.floor(size / qrData.length);

        // 绘制二维码模块
        for (var row = 0; row < qrData.length; row++) {
          for (var col = 0; col < qrData[row].length; col++) {
            ctx.fillStyle = qrData[row][col] ? "#000000" : "#ffffff";
            ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
          }
        }

        // 将 canvas 添加到页面中显示二维码
        qrCode.appendChild(canvas);
      }

      function qrCodeData(text) {
        // 生成 QR 算法所需的数据
        // 这里简化了 QR 算法，仅用于演示目的
        // 实际上，你可能需要使用一个更复杂的算法来生成二维码数据
        var data = [];
        for (var i = 0; i < 10; i++) {
          var row = [];
          for (var j = 0; j < 10; j++) {
            row.push(Math.random() < 0.5);
          }
          data.push(row);
        }
        return data;
      }

      var text = 'Hello, world!';
      var size = 200;
      generateQRCode(text, size);
    </script>
  </body>
</html>

在这个例子中，我们首先定义了一个 generateQRCode() 函数来生成二维码。在这个函数中，我们首先获取 id 为 qrcode 的 div 元素用于显示二维码。然后，我们创建了一个 canvas 元素，并使用 getContext('2d') 获取 2d 上下文。我们将 canvas 的宽度和高度设置为指定的尺寸。接下来，我们使用 qrCodeData() 函数生成二维码图像数据，并根据数据绘制二维码模块。最后，我们将 canvas 添加到 div 元素中显示二维码。

在 qrCodeData() 函数中，我们简化了 QR 算法，随机生成一个 10x10 的布尔值矩阵作为二维码数据。实际上，你可能需要使用更复杂的算法来生成真实的二维码数据。

你可以将 text 和 size 变量替换为你想要生成二维码的文本和期望的大小。

请注意，这个例子只是一个简单的演示，生成的二维码并不是真正有效的二维码。如果你需要生成真实的二维码，请使用专业的库或API。

二，第三方库（qr.js）

首先，将 qr.js 库添加到你的HTML文件中：

<script src="https://cdn.jsdelivr.net/npm/qr.js"></script>

vue中

npm install qr.js
//引入
import QRCode from 'qr.js'

然后，在JavaScript中创建一个生成二维码的函数：

function generateQRCode(text, size) {
  var qr = qrcode(0, 'L');
  qr.addData(text);
  qr.make();

  return qr.createImgTag(size);
}

在这个函数中，我们使用了 qrcode(0, 'L') 创建了一个QR码对象，并使用 addData() 方法添加要编码的文本，然后使用 make() 方法生成QR码。

最后，使用 createImgTag() 方法生成一个包含QR码的HTML图像标签，并指定了图像大小 size。

要生成二维码，只需调用 generateQRCode() 函数并传入要编码的文本和期望的图像大小：

var text = 'Hello, world!';
var size = 200;
var qrCode = generateQRCode(text, size);

这将生成一个包含QR码图像的HTML标签并将其赋给 qrCode 变量。然后，你可以将这个标签插入到你的页面中显示二维码：

document.getElementById('qrcode').innerHTML = qrCode;

在上面的代码中，我们将生成的QR码标签插入到 id 为 qrcode 的元素中。确保在你的HTML中有一个具有相应 id 的元素：

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

这样就可以在 id 为 qrcode 的元素中显示生成的二维码了。

完整的例子：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/qr.js"></script>
  </head>
  <body>
    <div id="qrcode"></div>

    <script>
      function generateQRCode(text, size) {
        var qr = qrcode(0, 'L');
        qr.addData(text);
        qr.make();

        return qr.createImgTag(size);
      }

      var text = 'Hello, world!';
      var size = 200;
      var qrCode = generateQRCode(text, size);

      document.getElementById('qrcode').innerHTML = qrCode;
    </script>
  </body>
</html>

这个例子会在页面上显示一个带有“Hello, world!”文本的二维码。你可以替换 text 变量为你想要生成二维码的任何文本。

三，第三方库（qrcodejs2）

首先，在你的Vue项目中安装qrcodejs2。可以使用npm或yarn运行以下命令：
```
npm install qrcodejs2
```
或者
```
yarn add qrcodejs2
```
在你的Vue组件中，导入qrcodejs2库：
```
import QRCode from 'qrcodejs2';
```

在你的Vue组件中创建一个方法来生成二维码。你可以在mounted钩子函数中调用这个方法生成二维码：

mounted() {
  this.generateQRCode();
},
methods: {
  generateQRCode() {
    const qrcode = new QRCode('qrcode', {
      text: 'YOUR_QRCODE_CONTENT',// // 生成二维码的内容
      width: 128, // 二维码宽度，单位像素
      height: 128, // 二维码高度，单位像素
    });
  },
}

这里使用了QRCode类来创建一个新的二维码实例。你可以自定义text、width和height等参数来生成不同样式的二维码。

在你的Vue模板中添加一个div元素来显示生成的二维码：
```
<template>
  <div id="qrcode"></div>
</template>
```
这里使用了id为qrcode的div元素来展示二维码。你可以根据需要修改id和样式。
最后，在你的Vue组件中，确保你有一个mounted生命周期函数，通过调用generateQRCode方法来生成二维码。