利用qr.js + canvas 生成图片文件 - web版

浏览器生成 qrcode

要将这段代码转换为可以在HTML页面中运行的版本，您需要去掉Node.js相关的部分，并使用浏览器原生的 Canvas 和相关的API。以下是转换后的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>
  <script src="https://cdn.jsdelivr.net/npm/@jswork/qrjs/dist/index.js"></script>
</head>
<body>
  <canvas id="qrcodeCanvas"></canvas>
  <script>
    // 生成二维码
    const Level = nx.QRjs.Level;
    const QRCode = nx.QRjs.QRCode;
    const qrcode = new QRCode(-1, Level.H);
    qrcode.addData("afei");
    qrcode.make();

    // 获取二维码模块的大小和数据
    const size = qrcode.getModuleCount();
    const cellSize = 10; // 每个模块的大小，调整这个值可以改变二维码的尺寸
    const margin = 4 * cellSize; // 留白的大小

    // 获取Canvas
    const canvas = document.getElementById("qrcodeCanvas");
    canvas.width = size * cellSize + margin * 2;
    canvas.height = size * cellSize + margin * 2;
    const ctx = canvas.getContext("2d");

    // 绘制二维码背景
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制二维码
    ctx.fillStyle = "#000000";
    for (let row = 0; row < size; row++) {
      for (let col = 0; col < size; col++) {
        if (qrcode.isDark(row, col)) {
          ctx.fillRect(
            margin + col * cellSize,
            margin + row * cellSize,
            cellSize,
            cellSize
          );
        }
      }
    }

    // 如果需要将二维码保存为PNG文件
    function downloadPNG() {
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'qrcode.png';
      link.click();
    }

    // 创建一个按钮用于下载PNG
    const button = document.createElement('button');
    button.textContent = 'Download QR Code as PNG';
    button.onclick = downloadPNG;
    document.body.appendChild(button);
  </script>
</body>
</html>

代码说明

  1. 加载库:

    • 使用 <script> 标签引入 @jswork/qrjs 库，它提供了类似于Node.js版本的API。

  2. 生成二维码:

    • 和之前的Node.js代码类似，先生成二维码数据，获取二维码的大小和模块信息。

  3. 绘制二维码:

    • 使用原生HTML的 canvas 元素和 2D 上下文绘制二维码。

  4. 下载PNG文件:

    • 提供了一个 downloadPNG 函数，它将Canvas内容导出为PNG数据，并通过创建一个链接来触发下载。

  5. 按钮用于下载:

    • 在页面上创建一个按钮，点击它可以将生成的二维码保存为PNG图片。

运行此HTML代码后，会在页面中显示一个二维码，并提供一个下载按钮来保存二维码为PNG格式。