前端生成带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的二维码。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="qrcode.js"></script>
    <!--http://code.ciaoca.com/javascript/qrcode/-->
</head>
<body>
  <div id="qrcode"></div>
  <script>
      //1、 简单方式
      //new QRCode(document.getElementById('qrcode'), 'your content');

      // 2、设置option
        var option={
            text:'http://www.baidu.com',
            width:256,	//图像宽度
            height:256,	//图像高度
            typeNumber:4,//4
            colorDark:"#000000",	//前景色
            colorLight:"#ffffff",	//背景色
            correctLevel:QRCode.CorrectLevel.L	//容错级别，可设置为：
      };
      new QRCode('qrcode', option)
  </script>
</body>
</html>

生成百度二维码示例：

前端生成带logo的二维码

用法

选项

猜你喜欢