JS生成二维码

来源：互联网发布：全知科技张超微博编辑：程序博客网时间：2024/06/07 05:16

前言：

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

而且现在提供很多不错的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>

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

资源下载

Jquery-Qrcode Github 地址：https://github.com/jeromeetienne/jquery-qrcode

Qrcode Github 地址：https://github.com/davidshimjs/qrcodejs

0 0