前端生成带logo的二维码

1、基于JQ插件jQuery.qrcode（网址：https://larsjung.de/jquery-qrcode/）。支持可以生成带logo的二维码，需要引入JQ，操作界面如下：

用法

语法非常简单。只是用

$(selector).qrcode(options);

将表示QR码的新生成的HTML元素附加到所选元素。如果所选元素已经是canvas元素，则将QR码绘制到其上。

选项

可用选项及其默认值为：

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

2、基于qrcode.js插件，插件不大，而且无需引入JQ，字段少的时候，用这个生成二维码很合适。但是不能生成带logo的二维码。

代码：

 

生成百度二维码示例：