插件描述:jquery.qrcode.js 是一個(gè)能夠在客戶端生成矩陣二維碼QRCode 的jquery插件 ,使用它可以很方便的在頁面上生成二維條碼。
將jquery.qrcode.min.js和jquery添加到您的網(wǎng)頁中
1 2 | <script src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> |
然后創(chuàng)建一個(gè)DOM元素去包含生成qr碼。
1 | <div id="qrcode"></div> |
然后你在此容器中的添加qrcode
1 2 3 4 5 | <script> jQuery(function(){ jQuery('#qrcode').qrcode("http://theartemis.cn"); }) </script> |
就這么簡單,您想要的二維碼就生成了。
指定二維碼的生成方式:
可以在調(diào)用函數(shù)的同時(shí)輸入想要的二維碼生成方式(table/canvas)。
1 2 3 4 5 6 7 8 9 10 11 | //使用table生成 jQuery('#qrcode').qrcode({ render: "table", text: "http://theartemis.cn" });
//使用canvas生成 jQuery('#qrcode').qrcode({ render: "canvas", text: "http://theartemis.cn" }); |
指定生成二維碼的大?。?/p>
可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。
1 2 3 4 5 6 7 | //生成100*100(寬度100,高度100)的二維碼 jQuery('#qrcode').qrcode({ render: "canvas", //也可以替換為table width: 100, height: 100, text: "http://theartemis.cn" }); |
指定生成二維碼的色彩樣式:
可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。
1 2 3 4 5 6 7 | //生成前景色為紅色背景色為白色的二維碼 jQuery('#qrcode').qrcode({ render: "canvas", //也可以替換為table foreground: "#C00", background: "#FFF", text: "http://theartemis.cn" }); |
中文ULR生成方法:
1 | jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進(jìn)行轉(zhuǎn)碼 |
如對(duì)本文有疑問,請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答!! 點(diǎn)擊進(jìn)入論壇