WEIC`S BLOG

使用jQuery.qrcode生成二维码

资源分享

jQuery.qrcode是通过使用jQuery实现图形渲染,画图生成二维码的一款jQuery插件,支持canvas和table两种渲染方式;

Github项目地址

使用

1.在你的网页中引入js(需要jQuery)

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

2.选在一个元素作为载体

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

3.然后进行渲染(注意第二步中HTML元素的id)

jquery('#qrcode').qrcode("this plugin is great");

3.1.你还可以改变二维码的大小和配色

jquery('#qrcode').qrcode({width: 64,height: 64,text: "size doesn't matter"});

3.2.参数说明

render   : "canvas",//设置渲染方式    
width       :64,     //设置宽度    
height      : 64,     //设置高度    
typeNumber  : -1,      //计算模式    
correctLevel    : QRErrorCorrectLevel.H,//纠错等级    
background      : "#ffffff",//背景颜色    
foreground      : "#000000" //前景颜色

将生成的二维码格式改为图片格式

前面说过这个插件生成的二维码格式是canvas或table格式的,但是有些情况我们需要images格式,所以我在网上搜了一波找到了以下方法

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

<img id='qrimg'  style='border:1px solid #000;'/>  

<script>  
    //使用默认方式生成二维码,并隐藏   
    var qrcode= $('#divOne').qrcode('http://www.gongjuji.net/').hide();  
    //  获取默认生成的canvas
    var canvas=qrcode.find('canvas').get(0); 
    // 将二维码以图片的方式渲染到img标签 
    $('#qrimg').attr('src',canvas.toDataURL('image/jpg'))  
</script>

支持中文

由于编码问题,这个插件不支持含有中文字符的二维码“正确生成”,生成是可以生成,但是扫码后是没用的,不会如你所愿的显示你输入的内容;

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

<script>  
    // 将字符串转换成UTF-8格式
    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;  
    }  

    // 然后使用toUTF8函数生成
    $('#qrcode').qrcode({  
        text: toUTF8('中文字符串'),  
        width: 64,  
        height: 64 
    });  
</script>
加载评论
打赏本文
二维码