首页 > 文章 > 前端

JavaScript生成简单二维码工具

时间：2026-01-21 20:48:36 357浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《JavaScript实现简单二维码生成器工具》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

首先引入qrcode.js库，再创建div容器用于显示二维码，接着通过new QRCode()生成固定内容二维码，然后结合input输入框和按钮实现动态生成，最后可添加CSS样式美化显示效果。

使用JavaScript实现一个简单的二维码生成器_javascript工具

要使用 JavaScript 实现一个简单的二维码生成器，可以借助现有的开源库 qrcode.js，它轻量、无需依赖，并且兼容性好。下面是一个完整的实现步骤和示例代码。

1. 引入 qrcode.js 库

你可以通过 CDN 直接引入 qrcode.js，无需安装额外环境：

2. 创建用于渲染二维码的容器

在 HTML 中添加一个 div 元素，二维码将绘制在该元素内部（使用 Canvas）：

3. 使用 JavaScript 生成二维码

通过 new QRCode() 实例化并传入配置参数，即可生成二维码：

const qrcode = new QRCode("qrcode", {
  text: "https://example.com",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

4. 动态更新二维码内容

如果需要根据用户输入实时生成二维码，可以结合 input 输入框实现：

function makeCode() {
  const inputValue = document.getElementById("text").value;
  if (!inputValue) return;
  const qrcodeDiv = document.getElementById("qrcode");
  qrcodeDiv.innerHTML = "";
  new QRCode(qrcodeDiv, {
    text: inputValue,
    width: 128,
    height: 128,
    correctLevel: QRCode.CorrectLevel.H
  });
}

这样用户输入任意文本或链接，点击按钮后就会生成对应的二维码。

5. 可选：添加样式美化显示效果

给二维码容器添加边框、居中等样式提升可读性：

#qrcode {
  margin-top: 20px;
  text-align: center;
}
#qrcode canvas {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

基本上就这些。只需要几行代码，就能在网页中嵌入一个功能完整的二维码生成器。适合用在工具类页面、分享功能或配置导出场景。

今天关于《JavaScript生成简单二维码工具》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

前往漫画官网入口并下载 ➜