QRCode.js：使用 JavaScript 生成二维码

Hello.鑫

已于 2022-10-14 09:49:49 修改

阅读量613

点赞数

分类专栏： html 文章标签： javascript qrcode 二维码

于 2022-10-14 09:34:40 首次发布

本文链接：https://blog.csdn.net/weixin_44037153/article/details/127313653

版权

html 专栏收录该内容

67 篇文章 5 订阅

订阅专栏

浏览器支持

支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

引入插件

下载地址：
jquery.min.js
qrcode.js

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/qrcode.js"></script>

基本用法

<div id="qrcode"></div>
<script type="text/javascript">
$(function() {
	new QRCode(document.getElementById("qrcode"), "https://www.baidu.com");  // 设置要生成二维码的链接
})
</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("qrcode", {
    text: "https://www.baidu.com",
    width: 100,
    height: 100,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("https://www.baidu.com"); // 生成另外一个二维码

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二维码</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
	</head>
	<body>
		<input id="text" type="text" value="https://www.baidu.com" /><br />
		<div id="qrcode"></div>
		<script>
			$(function() {
				var qrcode = new QRCode("qrcode");

				function makeCode() {
					var elText = document.getElementById("text");
					//判断是否空值，空值返回，不生成二维码
					if(!elText.value) {
						elText.focus();
						return;
					}
					qrcode.makeCode(elText.value);
				}
				makeCode();
				
				$("#text").
				on("blur", function() {
					makeCode();
				}).
				on("keydown", function(e) {
					if(e.keyCode == 13) {
						makeCode();
					}
				});
			})
		</script>
	</body>
</html>