首页 > 代码库 > 使用jquery-qrcode生成二维码

使用jquery-qrcode生成二维码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>使用jquery-qrcode生成二维码,支持中文</title>  
   <script src="http://www.mamicode.com/jquery-1.10.2.js"></script>
   <script src="http://www.mamicode.com/jquery.qrcode.js"></script>
    <script type="text/javascript">  
        function utf16to8(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;  
        }  
        $(function () {  
           jQuery(‘#output‘).qrcode({size:‘500‘,correctLevel:0,text:utf16to8("http://my.oschina.net/superkangning")});  
    
        })      
    </script>  
</head>  
<body>  
<div id="output" style="margin-left:200px;"></div>  
</body>  
</html>

 经过简单实践,

使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。

  jquery-1.10.2.js  和 jquery.qrcode.js 到网上下载,引入运行即可看到效果,简单实用

使用jquery-qrcode生成二维码