可自定义logo的jQuery生成二维码插件

当前位置:主页 > jQuery库 > 工具类 > 可自定义logo的jQuery生成二维码插件
可自定义logo的jQuery生成二维码插件
分享:

    插件介绍

    这是一款可自定义logo的jQuery生成二维码插件。该插件可以实现二维码的生成,定义在二维码上显示的logo,以及logo的位置,文字颜色、字体等多种属性,非常实用。

    浏览器兼容性

    浏览器兼容性
    时间:2019-03-20
    阅读:
简要教程

这是一款可自定义logo的jQuery生成二维码插件。该插件可以实现二维码的生成,定义在二维码上显示的logo,以及logo的位置,文字颜色、字体等多种属性,非常实用。

使用方法

在页面中引入jquery和jquery-qrcode.js文件。

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

使用一个空的div元素来作为二维码的容器。

<div id="container"></div>
                
初始化插件

在页面DOM元素加载完毕之后,通过qrcode方法来初始化插件。

$('#container').qrcode(options);
                

配置参数

可用的配置参数有:

{
    // render method: 'canvas', 'image' or 'div'
    render: 'canvas',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200,

    // code color or image element
    fill: '#000',

    // background color or image element, null for transparent background
    background: null,

    // content
    text: 'no text',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 0,

    // modes
    // 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
}
                

该可自定义logo的jQuery生成二维码插件的github网址为:https://github.com/lrsjng/jquery-qrcode