使用qrcode.js库可通过原生JavaScript在网页中动态生成二维码。首先引入库文件，然后创建QRCode实例并指定目标元素和配置参数即可。例如将当前页面URL生成128x128像素的二维码：new QRCode(document.getElementById("qrcode"), { text: window.location.href, width: 128, height: 128 });。支持动态更新内容，如监听输入框事件实时生成新二维码，并可设置颜色、尺寸及纠错等级（L/M/Q/H），提升容错能力。通过correctLevel : QRCode.CorrectLevel.H等配置实现个性化样式，适用于登录、分享等场景，注意清空旧内容与空值判断以保证程序健壮性。
现在二维码在网页中的应用非常普遍，比如分享链接、支付入口、登录扫码等。使用JavaScript动态生成二维码，可以让前端独立完成这一功能，无需依赖后端或图片资源。下面介绍如何用原生JavaScript结合成熟的库来实现动态生成二维码。
选择合适的二维码生成库
目前最流行且轻量的JavaScript二维码生成库是 qrcode.js。它基于HTML5 Canvas，兼容性好，使用简单，支持各种尺寸和容错率设置。
你可以通过以下方式引入：
- 使用CDN引入：
<script src="https://cdn.jsdelivr.net/npm/qrcode.js/lib/qrcode.min.js"></script> - 通过npm安装：
npm install qrcode.js
基本用法：生成一个简单的二维码
假设你想将当前页面的URL生成为二维码，可以这样做：
立即学习“Java免费学习笔记（深入）”；
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), {
text: window.location.href,
width: 128,
height: 128
});
</script>
这段代码会在id为qrcode的DOM元素中生成一个包含当前页面地址的二维码，尺寸为128x128像素。
动态更新二维码内容
实际项目中，二维码内容往往是可变的。例如用户输入一段文字，实时生成对应的二维码。
示例代码：
<input type="text" id="text-input" placeholder="输入要生成的内容">
<div id="qrcode"></div>
<script>
const input = document.getElementById('text-input');
const qrcodeDiv = document.getElementById('qrcode');
input.addEventListener('input', function () {
// 清除旧的二维码
qrcodeDiv.innerHTML = '';
if (input.value.trim() === '') return;
// 生成新的二维码
new QRCode(qrcodeDiv, {
text: input.value,
width: 150,
height: 150
});
});
</script>
这样就能实现输入即生成的效果，用户体验更流畅。
自定义样式与容错级别
qrcode.js还支持设置容错率（纠错等级），分为L、M、Q、H四个级别，越高代表越能抵抗损坏。
例如：
new QRCode(qrcodeDiv, {
text: "https://example.com",
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
其中colorDark和colorLight分别控制二维码模块和背景颜色，适合深色主题页面定制。
基本上就这些。掌握这个技巧后，你可以在登录页、推广页、个人中心等场景灵活运用，提升交互体验。不复杂但容易忽略细节，比如清空旧内容、处理空值输入等，写的时候注意健壮性就好。
