JS生成二维码

最新推荐文章于 2024-03-20 09:47:59 发布

原创最新推荐文章于 2024-03-20 09:47:59 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #二维码 #qrcode #jquery #javascript

前端技术专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用前端技术生成二维码，包括两种实现方式：table和canvas，并提供了jquery.qrcode.js和qrcode.js两个实用库的示例代码。

前言：

最近需要实现二维码方案，本来想后端生成图片，前端只是引用链接的。但发现这种每次生成二维码很耗费服务器资源，如果生成的二维码还要保存的话，那需要一套完整的二维码生成到淘汰的机制。想想都觉得麻烦。最后觉得直接客户端生成，反正信息也是公开的，只是换成二维码展示而已。

而且现在提供很多不错的JS控件进行生成。效果很不错。~\(≧▽≦)/~

实现方法：

前端实现二维码主要有两种方式,table,canvas。但微信'长按识别二维码'是只能识别图片的哦。那怎样呢？cancas.toDataUrl('images/png')。这样就可以啦。简单吧。

能更简单的吗？

放大招了jquery.qrcode.js 和 qrcode.js 二个js控件。分享给大家。

jquery.qrcode.js小案例

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.8.3_min.js"></script>
		<script type="text/javascript" src="jquery.qrcode.min.js"></script>
	</head>
	<title>Zero Clipboard Test</title>
	<script type="text/javascript">
		function generateQRCode(rendermethod, picwidth, picheight, url) {
			$("#qrcode").qrcode({
				render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
				width: picwidth, //宽度 
				height: picheight, //高度 
				text: url, //内容 
				typeNumber: -1, //计算模式
				correctLevel: 2, //二维码纠错级别
				background: "#ffffff", //背景颜色
				foreground: "#000000" //二维码颜色
			});
		}
		function init() {
			generateQRCode("table", 200, 200, "test");
		}
	</script>
	</head>
	<body onLoad="init()">
		<h1>Qrcode</h1>
		<div id="qrcode"></div>
	</body>
</html>

qrcode.js 实战小例子

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="qrcode.js"></script>
	</head>
	<body>
		<input id="text" type="text" value="http://www.baidu.com" /><br/>
		<div id="qrcode"></div>
		<script type="text/javascript">
			var qrcode = new QRCode("test", {
				text: "http://www.baidu.com", //二维码内容
				width: 128, //图像宽度
				height: 128, //图像高度
				colorDark: "#000000", //前景色
				colorLight: "#ffffff", //背景色
				correctLevel: QRCode.CorrectLevel.H
					/*
					   容错级别，可设置为
					  QRCode.CorrectLevel.L
					  QRCode.CorrectLevel.M
					  QRCode.CorrectLevel.Q
					  QRCode.CorrectLevel.H
					*/
			});
		</script>
	</body>
</html>

简单的不要不要的。看完跟例子做一遍包会！！

资源下载