10分钟上手！qrcode.js让网页秒变二维码生成器
项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs 你还在为网页集成二维码功能烦恼？还在担心兼容性问题？本文将带你从0到1掌握qrcode.js的使用方法，无需后端支持，纯前端实现二维码生成，兼容所有现代浏览器。读完本文，你将能够：
- 快速在网页中集成二维码生成功能
- 自定义二维码的大小、颜色等样式
- 实现输入内容实时生成二维码
- 了解qrcode.js的核心API和应用场景
什么是qrcode.js
qrcode.js是一个跨浏览器的JavaScript二维码生成库，它使用HTML5 Canvas和DOM中的table标签来生成二维码，无需任何外部依赖。项目路径：gh_mirrors/qr/qrcodejs。
该库的主要特点包括：
- 纯JavaScript实现，无需后端支持
- 支持所有现代浏览器，包括IE6及以上版本
- 轻量级，压缩后的qrcode.min.js文件体积小
- 高度可定制，支持自定义二维码大小、颜色等属性
快速开始：基础用法
引入库文件
使用qrcode.js非常简单，首先需要在HTML页面中引入库文件。你可以直接使用项目中的qrcode.js或压缩版本qrcode.min.js。
<script type="text/javascript" src="qrcode.js"></script>
基本示例
在页面中创建一个容器元素，然后通过JavaScript初始化二维码：
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://example.com");
</script>
这段代码会在id为"qrcode"的div元素中生成一个包含"https://example.com"链接的二维码。
高级用法：自定义二维码
配置选项
qrcode.js提供了丰富的配置选项，让你可以自定义二维码的外观和行为。常用的配置选项包括：
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| text | string | 二维码包含的文本内容 | "" |
| width | number | 二维码宽度（像素） | 256 |
| height | number | 二维码高度（像素） | 256 |
| colorDark | string | 二维码前景色 | "#000000" |
| colorLight | string | 二维码背景色 | "#ffffff" |
| correctLevel | QRCode.CorrectLevel | 容错级别 | QRCode.CorrectLevel.H |
自定义示例
下面是一个带有自定义配置的示例：
<div id="custom-qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("custom-qrcode"), {
text: "https://example.com",
width: 128,
height: 128,
colorDark : "#ff0000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
这个示例会生成一个128x128像素、红色前景色、白色背景的二维码，容错级别为最高级H。
实战案例：实时生成二维码
项目中的index.html文件提供了一个完整的实时生成二维码的示例。这个示例实现了一个输入框，当用户输入内容或按下回车键时，会实时生成对应的二维码。
核心代码解析
<input id="text" type="text" value="https://example.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("请输入文本内容");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
// 监听输入框事件，实时更新二维码
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
实现原理
- 首先创建一个输入框和一个二维码容器
- 初始化QRCode对象，设置默认宽高
- 定义makeCode函数，用于根据输入内容生成二维码
- 监听输入框的blur事件（失去焦点）和keydown事件（按下回车键），实时调用makeCode函数更新二维码
常用API方法
qrcode.js提供了几个常用的方法，方便开发者操作二维码：
makeCode(text)
生成二维码，参数为要编码的文本内容。
qrcode.makeCode("https://example.com");
clear()
清除当前生成的二维码。
qrcode.clear();
浏览器兼容性
根据项目README.md中的说明，qrcode.js支持以下浏览器：
- IE6及以上版本
- Chrome、Firefox、Safari、Opera等现代浏览器
- 移动设备浏览器：Mobile Safari、Android浏览器、Windows Mobile等
实际应用场景
qrcode.js可以应用于多种场景，例如：
网页链接分享
在网页中生成当前页面的二维码，方便用户用手机扫描访问。
产品信息展示
在电商网站中，为每个产品生成包含产品信息的二维码，用户扫描后可查看详细信息。
电子门票
生成包含用户信息的二维码作为电子门票，入场时扫描验证。
在线支付
集成到支付页面，生成包含支付信息的二维码。
总结与展望
qrcode.js是一个功能强大且易于使用的二维码生成库，通过本文的介绍，你应该已经掌握了它的基本用法和高级特性。无论是简单的链接二维码，还是复杂的自定义二维码，qrcode.js都能满足你的需求。
项目的LICENSE采用MIT协议，完全开源免费，你可以放心地在商业项目中使用。
如果你在使用过程中遇到问题，可以参考项目中的示例文件：
- index.html：基础示例
- index-svg.html：SVG格式二维码示例
希望本文对你有所帮助，欢迎点赞收藏，关注更多前端实用技巧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
