一: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效果