jQuery常用插件（二）二维码显示

为什么要用二维码

原因多了去了，移动端和PC端但凡都支持，就免不了响应式，但凡有响应式，就少不了PC到移动端的页面跳转，二维码是最方便的“传递”工具

二维码显示方式

二维码内部无非就是黑色白色的小格子组成的图片，里面包含最有用的信息就是 uri||text
- 静态图片，img放上去就是一个静态的二维码，任尔扫来扫去，我就这么一张图片，一个地址。那么这个img从哪来呢？太多了，网上随便一找，都是可以根据某些参数生成二维码的小工具
- canvas，非常好的一个展现方式，不过就是ie不支持，canvas好就好在可以自定义logo和文字在上面，可以灵活配置uri等参数，要啥有啥，用得最多的一种
- 当然还有div，没太了解，不做多说

插件名称

jQuery.qrcode.min.js

二维码生成条件

• 首先当然会需要一个dom元素来装载二维码了，jQuery一渲染，参数一放，一句话搞定

$(selector).qrcode(options);

• 各位看客肯定看到了options，对，这个options才是决定二维码灵魂的重要数据

{
    // 渲染方式: 'canvas', 'image' or 'div'
    render: 'canvas',

    // 版本范围在 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // 误差校正水平: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // 如果绘制到现有画布上的像素偏移
    left: 0,
    top: 0,

    // 尺寸(使用像素)
    size: 200,

    // 代码颜色或图像元素
    fill: '#000',

    // 背景颜色或图像元素，null则代表透明背景
    background: null,

    // 内容
    text: 'no text',

    // 相对于模块宽度的角半径: 0.0 .. 0.5
    radius: 0,

    // 模块中安静的区域
    quiet: 0,

    // 模式
    // 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
}

• 诶，问题来了，参数这么多，难道我每一个都要配置吗，当然不用，下面这样就足够了

{
    render:"canvas",
    height:80,
    width:80,
    correctLevel:0,
    text:'www.baidu.com'
}

参考：http://caibaojian.com/jquery-qrcode.html
http://www.jb51.net/article/61256.htm