二维码生成与显示

前面我们介绍了验证码的生成与显示，验证码一般是后端生成，前端显示的，而二维码则一般是前端生成与显示的。
当然你硬要验证码在前端生成，二维码在后端生成也可以做到，不过这个就和它们的应用场景和目的相冲突了，为什么这样说呢？验证码就是让人来识别的，不应该让前端轻易地得到图片内容，要靠人眼识别，当然了，现在自动图片识别也有了，而且识别率也高，速度还快，这样说来图片验证码技术也算有些落伍了。前端生成和验证好像也说得过去，但是验证码内容完全都在前端总感觉怪怪的，通常还是后端验证。二维码主要是方便让设备识别，提交到后端的是识别后的代码，而且二维码的图片或编码存在后端并没有太大意义，在前端生成就够了，而且二维码并没有加密验证的功能，存到前端也不涉及到泄密。当然了，如果在前端快速直接获取了二维码的文本内容，跳过扫码环节，算不算漏洞呢，是不是应该后端生成前端显示呢，好像也有一定的道理。
不纠结这么多了，前端二维码生成显示的方法推介一下：
方案就是jquery-qrcode.js ，推荐将jquery.mini.js和jquery-qrcode.js文件下载到本地，这样在局域网内也可以正常使用，不依赖cdn。

<!--testqr.html-->
<script type="text/javascript" src="./jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="./jquery-qrcode-0.18.0.js"></script>
<div id="qrcode"></div>
<div style="display:none"><img id="logo" src="logo.png"></div>

<script>
function showqr(qrtext,qrlabel,qrlogo) {
	$("#qrcode").qrcode({
		dom:"#qrcode",
		render: 'canvas',   //生成二维码的格式还有image、div
		ecLevel:"H",//容错级别 'L', 'M', 'Q' or 'H'
		text:qrtext,
		background:"#ffffff",//背景色
		fill:"#333333", //二维码纹路的颜色
		fontcolor:"#0000FF",//字体颜色
		fontname:"Ubuntu", //字体
		image:qrlogo, //二维码logo图片
		label:qrlabel,
		mPosX:0.5,   //图片在X轴的位置
		mPosY:0.5,    //图片在X轴的位置
		mSize:0.2,   //图片大小
		minVersion:10, //1-40
		mode:4, //0 标准 1 一条lable内容 2 中央label内容 3 一条logo图片 4 中央一块logo图片
		quiet:2,//quiet zone 闷声区大小
		radius:0.1,//边框圆角
		size:320 //生成的二维码图片大小
		})
	}
showqr("hello,world!","qrcode",$('#logo')[0]);
</script>

根据传入的text参数就可以显示这个二维码了，想带上文字标签的mode设置为2，想带上logo的mode设置为4。想同时带上文字和logo的。。。建议先制作带文字标签的logo。。。div的元素执行.qrcode()后，它的内容就显示为二维码图片了。