js生成二维码

阿超

发布于 2022-08-21 11:01:11

2.7K0

发布于 2022-08-21 11:01:11

文章被收录于专栏：快乐阿超快乐阿超

我们使用qrcodejs生成：https://github.com/davidshimjs/qrcodejs

下载这个js并引用

不知道怎么下载的可以直接到这个链接下按ctrl+s另存为

https://raw.githubusercontent.com/davidshimjs/qrcodejs/master/qrcode.min.js

然后编写代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/qrcode.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="qrcode"></div>
		<script type="text/javascript">
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			text: "https://vampireachao.gitee.io/",
			width: 128,
			height: 128,
			colorDark : "#000000",
			colorLight : "#ffffff",
			correctLevel : QRCode.CorrectLevel.H
		});
		</script>
	</body>
</html>

就可以了

但如果我们需要设置logo，就可以往上面二维码正中放一个图片就可以了：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/qrcode.min.js" type="text/javascript"></script>
		<style type="text/css">
			#qrcode {
				position: relative;
			}

			#qrcode::after {
				content: '';
				display: block;
				width: 50px;
				height: 50px;
				background: url(https://waibi.oss-cn-chengdu.aliyuncs.com/2020-06-01/head.jpg) no-repeat;
				background-size: 50px 50px;
				border-radius: 5px;
				box-shadow: 1px 1px 10px #000;
				position: absolute;
				top: 106px;
				left: 102px;
			}
		</style>
	</head>
	<body>
		<div id="qrcode">

		</div>

		<script type="text/javascript">
			var qrcode = new QRCode(document.getElementById("qrcode"), {
				text: "https://vampireachao.gitee.io/",
				width: 256,
				height: 256,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H
			});
		</script>
	</body>
</html>

效果如下：