使用jQuery插件生成二维码

        现在，二维码的使用越来越广泛，如今的大街，二维码遍地可见，二维码为我们带来了很多的便利。下面我们就介绍一种使用jQuery插件生成对应二维码的使用方法。

        插件描述：jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。

        效果如图所示：

        此插件支持两种生成方式(table/canvas):

        我们在百度上下载要是用的jquery插件--qrcode.min.js。此插件最新下载地址https://github.com/jeromeetienne/jquery-qrcode  ，下载了时候就可以使用了，使用起来非常方便，下面给大家一个最简单的二维码生成示例。

        1、首先，将jquery.qrcode.min.js和jquery添加到您的网页中

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

        2、然后创建一个DOM元素去包含生成qr码。

<div id="qrcode"></div>

        3、然后你在此容器中的添加qrcode

<script>
    jQuery(function(){
      jQuery('#qrcode').qrcode("http://www.jq22.com");
    })
</script>

        进阶应用：

1、指定二维码的生成方式：qrcode支持canvas和table两种方式进行图片渲染，默认使用canvas方式，效率最高。

//使用table生成
jQuery('#qrcode').qrcode({
  render: "table",
  text: "http://www.jq22.com",
});
		 
//使用canvas生成
jQuery('#qrcode2').qrcode({
  render: "canvas",
  text: "http://www.jq22.com"
});

2、指定生成二维码的大小：

//使用table生成
jQuery('#qrcode').qrcode({
  render: "table",
  text: "http://www.jq22.com",
  width: 100,				//生成100*100(宽度100，高度100)的二维码
  height: 100,
});

3、指定生成二维码的色彩样式：

//使用table生成
jQuery('#qrcode').qrcode({
  render: "table",
  text: "http://www.jq22.com",
  width: 100,			//生成100*100(宽度100，高度100)的二维码
  height: 100,
  foreground: "#C00",		//生成前景色为红色背景色为白色的二维码
    background: "#FFF",
});

4、对中文的使用：

jQuery("#output").qrcode(encodeURI("

 
扫描中文，结果显示不乱码：
<script>
function toUtf8(str) {    
    var out, i, len, c;    
    out = "";    
    len = str.length;    
    for(i = 0; i < len; i++) {    
        c = str.charCodeAt(i);    
        if ((c >= 0x0001) && (c <= 0x007F)) {    
            out += str.charAt(i);    
        }
        else if (c > 0x07FF) {    
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
        } 
        else {    
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
        }    
    }    
    return out;    
} 

jQuery(function(){
    var str = toUtf8("http://www.baidu.com/s?wd=钓鱼岛是中国的"); 
    jQuery('#output').qrcode({
        render    : "canvas",//也可以替换为table
        width   : 200,
        height  : 200,
        foreground: "#C00",
        background: "#FFF",
        text      : str
    });
});
</script>

demo实例：链接：http://pan.baidu.com/s/1pKD3dBd   密码：7j75

本文为崔凯原创文章,转载无需和我联系,但请注明来自冷暖自知一抹茶ckhttp://www.cksite.cn

• 上一篇： jQuery-zclip实现复制内容到剪切板
• 下一篇： Listary文件浏览搜索效率神器