jquery.qrcode二维码加文字描述和图片

最新推荐文章于 2025-05-21 16:53:34 发布

原创最新推荐文章于 2025-05-21 16:53:34 发布 · 7.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html5 #javascript

其它专栏收录该内容

9 篇文章

订阅专栏

零、码仙励志

你害怕一件事，可还是要去做，那才是勇敢

一、下载

微信搜索公众号码海无际或扫描左侧二维码回复c012获取，

如果不会请给我留言或者加QQ194760901找我索要

二、使用

工程目录截图

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.qrcode.min.js"></script>
</head>
<body>
	<div id="qrcode"></div>
	<canvas></canvas>
	<script>
		//jquery-qrcode不支持中文,改变一下编码就支持了！
		function utf16to8(str) {
			var out, i, len, c;
			out = "";
			len = str.length;
			for (i = 0; i < len; i++) {
				c = str.charCodeAt(i);
				if ((c >= 0x0001) && (c <= 0x007F)) {
					out += str.charAt(i);
				} else if (c > 0x07FF) {
					out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
					out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				} else {
					out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				}
			}
			return out;
		}

		//二维码宽高
		var qrcodewidth = 400;
		var qrcodeheight = 400;
		//canvas宽高
		var canvaswidth = qrcodewidth;
		var canvasheight = qrcodeheight + 100;
		//logo宽高
		var logowidth = 100;
		var logoheight = 100;
		//文字描述位置
		var textleft = qrcodewidth / 2;
		var texttop = qrcodeheight + 70;
		//logo位置
		var logoleft = (qrcodewidth - logowidth) / 2;
		var logotop = (qrcodeheight - logoheight) / 2;

		var qrcode = $('#qrcode').qrcode({
			render : 'canvas',
			text : utf16to8("https://blog.youkuaiyun.com/tswc_byy"),
			width : qrcodewidth,
			height : qrcodeheight,
			background : '#ffffff',
			foreground : '#000000',
		});
		var canvas = qrcode.find('canvas').get(0);
		var img = new Image();
		img.src = canvas.toDataURL('image/png');
		img.onload = function() {
			canvas.width = canvaswidth;
			canvas.height = canvasheight;
			var ctx = canvas.getContext('2d');
			//设置画布背景
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			//设置文字样式
			ctx.fillStyle = '#000000';
			ctx.font = 'bold ' + 50 + 'px Arial';
			ctx.textAlign = 'center';
			//文字描述
			ctx.fillText("秦哥的博客", textleft, texttop);
			//绘制二维码
			ctx.drawImage(img, 0, 0);
			//设置logo
			var logo = new Image(logowidth, logoheight);
			logo.src = 'assets/img/hui.jpg';
			logo.onload = function() {
				ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
			}

		}
	</script>
</body>
</html>

运行结果