js生成二维码

话不多说直接上代码


html:

<input id="text" type="text" value="http://www.baidu.com" />
<br />
<div id="qrcode"></div>
<img id="logoImg" src="中心图片的u路径" style="display:none" />

js:
引入相关库

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>

<script>
	function makeCode() { 
		var urlstr = document.getElementById("text");
		if(!urlstr.value) {
			alert("请输入二维码内容");
			urlstr.focus();
			return;
		}
		//方式1直接生成
		//var qrcode = new QRCode("qrcode");
		//qrcode.makeCode(urlstr.value);
		//方式2配置二维码大小及logo
		var width = 200;
		var height = 200;
		//设置logo的 位置 and 大小
		var x = width * 0.35;
		var y = height * 0.35;
		var lw = width * 0.3;
		var lh = height * 0.3;
		//生成二维码
		var qrcode = new QRCode("qrcode", {
			text: urlstr.value,
			width: width,
			height: height,
			colorDark: "#000000",
			colorLight: "#ffffff",
			correctLevel: QRCode.CorrectLevel.H
		});
		//把logo画到二维码里面
		$("#qrcode canvas")[0].getContext('2d').drawImage($("#logoImg")[0], x, y, lh, lw);
	}
	//回车事件
	$("#text").on("keydown", function(e) {
		if(e.keyCode == 13) {
			makeCode();
		}
	});
</script>