使用qrcode.js生成二维码及在二维码中间加入logo的方法

最新推荐文章于 2025-04-18 22:09:36 发布

站在巨人肩上的猴子

最新推荐文章于 2025-04-18 22:09:36 发布

阅读量1.2w

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/sinat_33775006/article/details/104797715

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用qrcode.js生成二维码，并详细讲解了如何在生成的二维码中间加入logo。首先，需要下载qrcode.js和引入jquery。然后创建页面元素，通过qrcode实例生成二维码。由于qrcode.js本身不支持加logo，可以借助图片叠加在二维码上实现，提供了基于JQuery和原生js的两种实现方式。示例代码中注意图片路径的调整。

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

一、使用qrcode.js生成二维码

1、下载qrcode.js

链接: qrcode下载

2、使用方法

1）引入js，由于qrcode.js是基于jquery的，所以需要先引入jquery
2）创建页面元素，再通过创建qrcode实例，绘制生成二维码
示例代码：

<html>
	<head>
		<title>示例</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="qrcode.min.js"></script>
	</head>
	<body>
		<div id='qrcode'></div>
	</body>
</html>

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

调试链接：菜鸟教程

二、在二维码中加入logo

由于qrcode.js不提供在二维码中间加入logo的方式，所以通过在二维码加载的时候，用图片叠在二维码中间实现。
示例代码一：

<html>
	<head>
		<title>示例</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="qrcode.min.js"></script>
	</head>
	<body>
		<div id='qrcode'>
			<img id='qrCodeIco' src='xxx.png' ></img> 
		</div>		
	</body>
</html>

<script>
	var img = $("#qrCodeIco");
	img.css(“position:absolute;width:20px;height:20px”);
	var qrcode = new QRCode($("#qrcode"), {
   	 	width : 100,
    	height : 100
	});
	 //控制logo图标的位置
	var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2;
	$("#qrCodeIco").css("margin", margin);
</script>

示例代码二：

<html>
	<head>
		<title>示例</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="qrcode.min.js"></script>
	</head>
	<body>
		<div id='qrcodeDiv'></div>		
	</body>
</html>

<script>
	var qrDiv = document.getElementById('qrcodeDiv');
	//创建图片，插入id为qrcode的div元素中
	var img = document.createElement('img');
	img.id = 'qrCodeIco';
	img.src = 'xxx.png';
	img.src = 'img/qrlogo-28.png';
	img.style.position = 'absolute';
	img.style.width = '20px';
	img.style.height = '20px';
	//将img插入到div
	qrDiv.appendChild(img);
	//创建二维码模块
	var qr = document.createElement('div');
	qr.id = 'qrcode';
	var qrcode = new QRCode(qr , {
   	 	width : 100,
    	height : 100
	});
	//控制logo图标的位置
	var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2; 
	$("#qrCodeIco").css("margin", margin);
</script>

示例结果：
在这里插入图片描述
示例代码一主要基于JQuery的用法，直接用JQuery提供的各种函数来实现，最常用。
示例代码二主要基于原生js的写法，一般用于html页面不能直接改动，需要用js来动态改动的情况，该示例需要注意，img需要在二维码渲染前插入到目标DIV中，否则会被挤压到二维码的下面。
以上示例中图片的路径根据实际情况，自行修改。

参考资料菜鸟教程