JS生成带Logo的QRCode二维码

最新推荐文章于 2024-06-30 21:26:58 发布

kung900519

最新推荐文章于 2024-06-30 21:26:58 发布

阅读量5.5k

点赞数 2

分类专栏： JaveWeb 文章标签： QRCode二维码带Logo

本文链接：https://blog.csdn.net/kung_com/article/details/94838914

版权

JaveWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一：jquery.qrcode.min.js QRCode的JS库下载（自己百度或者直接下载最后的Demo）；

二：选定自己需要放在二维码中间的一个Logo图片；

三：代码实现；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS生成QRCode带Logo</title>
</head>
<body>
	<div id="qrcodeW"></div>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
	<img id="logoImg" src="image/paymenlogo.png" style="display:none"/>
	<script type="text/javascript">
		var code_url = "https://qr.alipay.com/bax06725xqhcgzfskwhq00dd";	
		$(function() {                                                                   
			var qrWidth = 200;                                                                      
			var qrHeight = 200;                                                                                                                                    
			var logoQrWidth  = qrWidth/4;                                                                 
			var logoQrHeight  = qrHeight/4;
			$('#qrcodeW').qrcode({
	             render : "canvas", //设置渲染方式，有table和canvas
	        	 text : code_url, //扫描二维码后自动跳向该链接
	             width : qrWidth, //二维码的宽度
	             height : qrHeight //二维码的高度
	        });
			$("#qrcodeW canvas")[0].getContext('2d').drawImage($("#logoImg")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
		})
	</script>
</body>
</html>

四：Demo下载地址

https://download.csdn.net/download/tianya900519/11289197

五：Demo效果

kung900519

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
JS生成带Logo的QRCode二维码

一：jquery.qrcode.min.js QRCode的JS库下载（自己百度或者直接下载最后的Demo）；二：选定自己需要放在二维码中间的一个Logo图片；三：代码实现；<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS生成QRCode带Logo&...
复制链接

扫一扫