动态生成Qrcode(二维码)

简述

开题先说些题外话，不过也很有趣呢，就当丰富下课外知识吧～ 二维码应用在我们的生活中随处可见，你只需要用手机对着二维码“扫一扫”或者长按图片识别二维码，即可获得该码对应信息，加速了我们对商家、购物、观影等信息的获取。二维码（又叫二维码条），最早起源于日本，它是用特定的几何图形按一定规律在平面上分布的黑白相间的图形，是所有信息数据的一把钥匙。话说还有“一维码”，不过这里就不做过多的解释了。二维码有很多优点，例如：高密度编码，信息容量大；容错能力强；译码可靠性高；可引入加密措施；成本低，易制作，持久耐用。

动态生成二维码的方法有很多，后端（php）同学也是可以实现。现在介绍一款基于jquery的二维码生成插件qrcode，在页面中调用该插件就能生成对应的二维码。(至于选取哪种方式来实现，那就要看其中哪种方式对“使用者”是最友好的即可！)

插件介绍

jquery.qrcode.js 是用jquery方式封装起来的（jquery 版本可以自己选择），通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式。最新代码可以到github获取https://github.com/jeromeetienne/jquery-qrcode

** 主要支持的功能：**

function getQRCode(rendermethod, picwidth, picheight, url) {
    $("#qrcode").qrcode({ 
        render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
        width: picwidth, //宽度 
        height: picheight, //高度 
        text: utf16to8(url), //内容 
        typeNumber: -1,//计算模式
        correctLevel: 2,//二维码纠错级别
        background: "#ffffff",//背景颜色
        foreground: "#000000"  //二维码颜色

    });
}

** 调用 **

getQRCode("canvas", 200, 200, "https://wangjiaoxia.github.io/");

** 测试结果 **

img1

qrcode canvas

img2

qrcode table

** 注意 **

这样就可以在页面中直接生成一个二维码，你可以用手机“扫一扫”功能读取二维码信息。img1的渲染方式为canvas，img2的渲染方式为table。自我感觉没有什么明显差异，也可能生成的页面本来就加载很慢吧～

其实上面的js有一个小小的缺点，就是默认不支持中文连接。jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，而这个方法默认会获取它的 Unicode 编码，英文（UTF-8，3位）是没有问题，如果是中文内容（UTF-16, 2位），在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。

** 解决方案 **

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;  
}

** 试用 **

    var str = toUtf8("中文字符哦"); 
    $('#qrcode').qrcode(str);

** 测试结果 **

img3

qrcode canvas

这个页面中加入了中文字符二维码可以生成，只是页面为404

** 二维码中添加头像 **

这个很简单，就是在二维码上加一张图片，通过定位放在二维码中间就好，需要注意的是图片大小尽量不要超过二维码的7%，虽然二维码有一个优点就是即使局部破损或者被遮盖也能正常使用。这个遮盖的大致范围就是7%左右。

img4

qrcode canvas

这里需要注意下使用渲染方式为table时，会出现二维码每个小格计算产生的误差，导致二维码生成后变形以至无法识别。解决的办法只能是计算每个小格的宽度，最后得到table的宽度。(呃...话说这个错误不是必现）在使用中还可能会遇到生成链接太长导致二维码识别困难，解决这个问题就是给二维码添加一个白色边框就好啦～

很佩服大神们做的各式各样的插件，用起来方便快捷只需要读一读API就能完成某个功能。但是使用插件的基本准则还的有，就是“标准”“兼容”“可信赖”...

© 2016, Content By BEGINNER