html js生成二维码底部带文字

HTML和JavaScript可以结合使用生成二维码，并在其底部添加文字。通常，我们会利用一些库如`qrcode-generator`或`jsQR`来生成二维码图片，然后通过DOM操作将文字添加到二维码下方。这里是一个简单的步骤概述：

1. 引入所需的库（如果需要的话）：

   <script src="path/to/qrcode.min.js"></script>

2. 创建一个按钮点击事件，用于生成二维码：

   <button id="generateQr">生成二维码</button>

   document.getElementById('generateQr').addEventListener('click', generateQrCode);

3. 编写函数`generateQrCode`，生成二维码并添加文字：

   function generateQrCode() {
     var text = "这是二维码底部的文字";
     var qrData = 'http://example.com'; // 你的二维码数据

     var qrCodeCanvas = QRCode.getQRCode({
       text: qrData,
       width: 150, // 可调整二维码大小
       height: 150,
       colorDark : "#000000",
       colorLight : "#ffffff"
     });

     var qrCodeImage = qrCodeCanvas.toDataURL(); // 将二维码转换为Base64图片

     // 创建一个新的`<img>`元素插入到文档中
     var qrContainer = document.createElement('div');
     qrContainer.style.position = 'relative';
     qrContainer.innerHTML = '<img src="' + qrCodeImage + '" alt="">';

     // 添加文字到二维码下方
     var qrText = document.createElement('p');
     qrText.textContent = text;
     qrText.style.position = 'absolute';
     qrText.style.bottom = '10px';
     qrText.style.width = '100%';
     qrText.style.color = '#fff'; // 文字颜色，可以根据需求调整
     qrContainer.appendChild(qrText);

     // 将二维码容器添加到页面上
     document.body.appendChild(qrContainer);
   }