插件描述：jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
官方文档地址：http://larsjung.de/jquery-qrcode/
github地址：https://github.com/lrsjng/jquery-qrcode
官方demo：https://larsjung.de/jquery-qrcode/latest/demo/
如何使用它
将jquery.qrcode.min.js和jquery添加到您的网页中
1 2 | <script src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> |
然后创建一个DOM元素去包含生成qr码。
1 | <div id="qrcode"></div> |
然后你在此容器中的添加qrcode
1 2 3 4 5 | <script> jQuery(function(){ jQuery('#qrcode').qrcode("http://www.ttfde.top"); }) </script> |
就这么简单，您想要的二维码就生成了。
进阶用法
指定二维码的生成方式：
可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。
1 2 3 4 5 6 7 8 9 10 11 | //使用table生成 jQuery('#qrcode').qrcode({ render: "table", text: "http://www.ttfde.top" });
//使用canvas生成 jQuery('#qrcode').qrcode({ render: "canvas", text: "http://www.ttfde.top" }); |
指定生成二维码的大小：
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
1 2 3 4 5 6 7 | //生成100*100(宽度100，高度100)的二维码 jQuery('#qrcode').qrcode({ render: "canvas", //也可以替换为table width: 100, height: 100, text: "http://www.ttfde.top" }); |
指定生成二维码的色彩样式：
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
1 2 3 4 5 6 7 | //生成前景色为红色背景色为白色的二维码 jQuery('#qrcode').qrcode({ render: "canvas", //也可以替换为table foreground: "#C00", background: "#FFF", text: "http://www.ttfde.top" }); |
中文ULR生成方法:
1 | jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码 |
附件为插件的压缩版本和非压缩版本
- 本文固定链接: http://ttfde.top/index.php/post/390.html
- 转载请注明: admin 于 TTF的家园 发表
《本文》有 1 条评论