前端实现二维码生成与识别功能，不需要依赖后端服务，通过成熟的JavaScript库就能快速完成，既可以减少服务端的请求压力，也能提升用户的使用体验。下面分别介绍生成和识别的具体实现方式。
二维码生成实现
二维码生成可以使用qrcode.js这个轻量库，它支持自定义二维码的尺寸、颜色、容错级别等参数，兼容性也比较好，能够适配大部分现代浏览器。
基础使用步骤
首先需要在项目中引入qrcode.js，如果是原生项目可以直接通过script标签引入，如果是模块化项目可以通过npm安装后引入。
原生引入方式示例：
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
生成二维码的核心代码如下：
// 获取承载二维码的容器
const qrcodeContainer = document.getElementById('qrcode');
// 创建二维码实例，配置相关参数
new QRCode(qrcodeContainer, {
text: 'https://ipipp.com', // 二维码承载的内容
width: 200, // 二维码宽度
height: 200, // 二维码高度
colorDark: '#000000', // 深色部分颜色
colorLight: '#ffffff', // 浅色部分颜色
correctLevel: QRCode.CorrectLevel.H // 容错级别，H为最高
});
如果需要动态修改二维码内容，可以调用实例的clear方法清空原有内容，再重新调用生成方法即可。
二维码识别实现
二维码识别可以借助jsQR库实现，这个库可以解析图片中的二维码数据，支持从canvas、ImageData等对象中提取二维码信息。
识别流程说明
识别二维码通常需要先获取图片资源，比如用户上传的图片或者摄像头捕获的帧，然后将图片转换为ImageData格式，再交给jsQR解析。
首先引入jsQR库：
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
识别用户上传图片中二维码的示例代码如下：
// 监听文件上传事件
document.getElementById('uploadInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
// 创建canvas绘制图片
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 获取图片的ImageData
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 调用jsQR解析二维码
const qrCode = jsQR(imageData.data, imageData.width, imageData.height);
if (qrCode) {
console.log('识别到的二维码内容：', qrCode.data);
alert('识别成功，内容为：' + qrCode.data);
} else {
alert('未识别到二维码');
}
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
常见问题与优化
- 生成二维码时如果内容过长，建议适当调大二维码尺寸，避免内容超出容量导致生成失败。
- 识别二维码时如果图片模糊，识别成功率会下降，可以提示用户上传清晰的图片，或者对图片做简单的锐化处理。
- 如果需要支持摄像头实时识别二维码，可以结合
getUserMediaAPI获取摄像头流，定时截取帧进行识别即可。
通过以上方式，就可以完整实现前端二维码的生成与识别功能，开发者可以根据项目实际需求调整参数和交互逻辑。
JavaScript二维码生成二维码识别QRCode修改时间：2026-07-17 03:00:24