应该很多人都用过jquery.qrcode来生成二维码,生成代码确实很简单demo代码如下
<!DOCTYPE html> <html> <head> <title>basic example</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <!--<script type="text/javascript" src="../jquery.qrcode.min.js"></script> --><script type="text/javascript" src="../src/jquery.qrcode.js"></script> <script type="text/javascript" src="../src/qrcode.js"></script> <p>Render in table</p> <div id="qrcodeTable"></div> <p>Render in canvas</p> <div id="qrcodeCanvas"></div> <script> //jQuery('#qrcode').qrcode("this plugin is great"); jQuery('#qrcodeTable').qrcode({ render : "table", text : "http://jetienne.com" }); jQuery('#qrcodeCanvas').qrcode({ text : "http://jetienne.com" }); </script> </body> </html>
调用了三个js脚本,jquery.js、jquery.qrcode.js 和qrcode.js 。jquery当然是少不了的了,后两个可以在项目src目录下找到,应该是项目的源文件。 也可以包含一个压缩文件来代替jquery.qrcode.min.js
调用代码只有三行,真的很简洁,但是问题也随之而来,二维码容错怎么设置? 这个参数是二维码里最重要的参数。
我们的终端都可以清晰的显示二维码,为了让用户扫码更快,我们都选用的最低容错级别。而jquery.qrcode很明显用的是高甚至是最高的容错(对比草料)。
没办法只能阅读源码了
//jquery-qrcode/src/jquery.qrcode.js $.fn.qrcode = function(options) { // if options is string, if( typeof options === 'string' ){ options = { text: options }; } // set default values // typeNumber < 1 for automatic calculation options = $.extend( {}, { render : "canvas", width : 256, height : 256, typeNumber : -1, correctLevel : QRErrorCorrectLevel.H,//原来在这里默认了最高级别 吼吼 background : "#ffffff", foreground : "#000000" }, options);
//jquery-qrcode/src/qrcode.js //--------------------------------------------------------------------- // QRErrorCorrectLevel //--------------------------------------------------------------------- //容错级别对象 var QRErrorCorrectLevel = { L : 1, M : 0, Q : 3, H : 2 };
看了上面的代码明白了,还有一个容错参数correctLevel,记不住QRErrorCorrectLevel 对象的话,直接配0 1 2 3数值就行,看你的需求了
//那么我的项目应该这么配置 jQuery('#qrcodeCanvas').qrcode({ render : "canvas", width : 256, height : 256, typeNumber : -1, correctLevel : 1 });