JQuery生成二维码,有资源下载
原文链接:http://www.yxxrui.cn/article/65.shtml
没时间或者懒得看的,可以直接看加粗部分(或试试手感▼)。
使用jquery.qrcode来生成二维码,qrcode基于JQuery,所以使用之前必须先引用JQuery。Qrcode的最新代码地址:https://github.com/jeromeetienne/jquery-qrcode
1、先添加引用
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、添加存放容器
需要在页面上设置需要显示的地方,用来存放二维码,比如
<div id=“erweima”></div>
3、开始调用
$(‘#erweima’).qrcode('http://www.yxxrui.cn'); //要生成的字符串
4、大功告成
====================优雅的分割线======================
方法原型:
$(selector).qrcode(options);
其中参数options详细设置方法如下:
(试了试,似乎没啥用▼)
{ // render method: 'canvas', 'table' render: 'canvas', // version range somewhere in 1 .. 40 minVersion: 1, maxVersion: 40, // error correction level: 'L', 'M', 'Q' or 'H' ecLevel: 'L', // offset in pixel if drawn onto existing canvas left: 0, top: 0, // size in pixel size: 200, // code color or image element fill: '#000', // background color or image element, null for transparent background background: null, // content text: 'no text', // corner radius relative to module width: 0.0 .. 0.5 radius: 0, // quiet zone in modules quiet: 0, // modes // 0: normal // 1: label strip // 2: label box // 3: image strip // 4: image box mode: 0, mSize: 0.1, mPosX: 0.5, mPosY: 0.5, label: 'no label', fontname: 'sans', fontcolor: '#000', image: null }
(试了试,似乎没啥用▲)
常用的有
$(“#erweima”).qrcode({ render:"table", width:200, height:200, background:'#ffffff',//背景颜色 foreground:'#ff0000',//二维码颜色 text:"http://www.yxxrui.cn" });
需要注意的是:table的方式效率比较低,canvas方式效率高一点(默认为canvas),但是canvas方式必须在支持html5的浏览器上才能使用,如果使用canvas时会出现无法生成的情况,而使用table时会出现速度慢的情况,所以可以考虑判断当前浏览器是否支持html5.
加粗部分如下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>二维码DEMO</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> </head> <body> <div id="erweima"></div> <script type="text/javascript"> var renderStr;//显示方式,有canvas和table两种 //检查是否支持html5,也可以使用其他方式 if (window.applicationCache) { renderStr = 'canvas'; }else{ renderStr = 'image'; } $('#erweima').qrcode({ render: renderStr, width: 180, height:180, text: "http://www.yxxrui.cn" //可以设置为当前url,如:window.location+"" }); </script> </body> </html>
加粗部分如上:
生成的二维码如下:
DEMO下载地址(可直接运行):http://www.yxxrui.cn/article/65.shtml
事不难无以识英雄,磨难出雄才,如有疑问可留言或邮件,我的独立博客http://www.yxxrui.cn