前端生成二维码

================= 准备html =====================

<div id="code"></div>

================== 引入js ================

<script  src="/Public/js/jquery.qrcode.min.js"></script>

==================== 生成二维码 =================

initCode: function() {
						$("#code").html('');
						var url = '';

						$("#code").qrcode({
							render: "canvas",
							width: 240,
							height: 240,
							text: url,
						});

						this.addText(title, 240, 20, 2)
					},

================= 二维码中加字 =====================

addText: function(text, canvassize, fontsize, padding, divBackground = "#fff", fontColor = "#1FA2FF") {
						var canvases = document.getElementsByTagName('canvas');
						var fontsizeH = fontsize + padding * 3; //文字高度
						var rectW = 0; //长方形背景宽度
						var width = 0;
						var centerx = canvassize / 2 - rectW / 2; //居中的x
						var centery = canvassize / 2 - fontsizeH / 2; //居中的y

						var ctx = canvases[0].getContext("2d");
						width = ctx.measureText(text).width; //文字长度,不知道为什么这里的width是中文字数的10倍，故需要乘上fontsize/10获取到真实的文字宽度
						rectW = width * fontsize / 10 + padding * 2; //长方形背景宽度，应左右留padding
						centerx = canvassize / 2 - rectW / 2; //长方形背景居中的x
						centery = canvassize / 2 - fontsizeH / 2 //长方形背景居中的y
						ctx.fillStyle = divBackground; //长方形背景颜色
						ctx.fillRect(centerx, centery, rectW, fontsizeH);
						ctx.font = fontsize + "px 楷体"; //设置文字大小
						ctx.fillStyle = fontColor;
						ctx.fillText(text, centerx + padding, centery + fontsize + padding / 2)
						//经测试，若参数y只填centery，则文字显示在长方形背景的上边，所以需要加上fontsize长方形背景才能包裹文字
					},	

===========================================