qrcode创建二维码图片

最新推荐文章于 2025-07-08 21:28:07 发布

原创最新推荐文章于 2025-07-08 21:28:07 发布 · 515 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #qrcode

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jquery.min.js和qrcode.js创建QRCode二维码。通过HTML、CSS和JavaScript代码示例，展示了设置二维码的宽度、高度、颜色和错误级别等参数的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入jquery.min.js和qrcode.js
2、声明创建二维码的容器的DIV
3、调用qrcode.js创建方法

<!DOCTYPE html>
<html>
	<head>
		<title>预览</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/qrcode.js"></script> 
		<style type="text/css">
			body {
				background: #fff;
				margin: 0px;
				padding: 0px;
			}
			h2{
				text-align: center;
			}
			p{
				font-size: 15px;
				font-family: "微软雅黑";
			}
		</style>
		
	</head>
	<body>

		<div id="qrcode" style="margin-left: 30px;"></div> 

	
	</body>
<script type="text/javascript">
var shareUrl='123456789';

var qrcode = new QRCode(document.getElementById("qrcode"), {
	width : 100,
	height : 100
});
function makeCode () {		
	qrcode.makeCode(shareUrl);
}
makeCode();
</script>
</html>

创建QRCode中可传构造参数：
width : 256, //宽度
height : 256,//高度
typeNumber : 4,//计算模式，一般不用
colorDark : “#000000”,//图点色
colorLight : “#ffffff”,//背景色
correctLevel : QRErrorCorrectLevel.H//错误级别[L|M|Q|H]

附件地址：
JQuery

qrcode