如何使用qrcode.js将生成的二维码调整为100px尺寸？

嘿，我来帮你搞定这个二维码尺寸调整的问题！你之前没成功的核心原因是只改了容器的CSS，但没在qrcode.js的生成配置里指定新的尺寸，默认生成的二维码还是200px，导致和容器尺寸不匹配。下面是具体的修复步骤：

1. 调整容器CSS样式 #

先把你的#output样式里的尺寸改成100px，还可以加上box-sizing避免边框额外占空间：

<style>
#output {
  border: 1px solid #eee;
  min-height: 100px;
  width: 100px;
  box-sizing: border-box; /* 确保边框不会让容器实际尺寸超过100px */
}
</style>

2. 修改二维码生成的配置参数 #

在你的generateBarCode函数里，调用QRCode构造器时必须明确指定width和height为100px，同时可以直接用容器的title属性作为二维码内容（对应你的title="S0009"）：

function generateBarCode() {
  alert('ok');
  const output = document.getElementById("output");
  // 先清空容器，避免重复生成多个二维码
  output.innerHTML = "";
  // 生成指定尺寸的二维码
  new QRCode(output, {
    text: output.title, // 直接使用div的title值作为二维码内容
    width: 100, // 核心：设置二维码宽度为100px
    height: 100, // 核心：设置二维码高度为100px
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H // 纠错等级，可根据需求调整
  });
}

为什么之前没生效？ #

qrcode.js默认生成的二维码是200x200px的，就算你把容器改成100px，二维码本身的尺寸还是没变，要么会超出容器被裁剪，要么被浏览器强制压缩变形。只有同时修改生成配置的尺寸和容器的CSS尺寸，才能让二维码完美适配100px的容器。

如果还是有问题，可以检查：

• 有没有确保函数里正确获取到了output元素
• 有没有重复调用生成函数导致多个二维码叠加
• 容器有没有其他继承的CSS样式（比如padding）影响尺寸

内容的提问来源于stack exchange，提问作者Skeleton1775