jquery-qrcode二维码生成插件

github地址

插件描述：jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，文件本身很小，纯js生成二维码，不依赖于其他。使用它可以很方便的在页面上生成二维条码。并且可以设置二维码边距及二维码中间的logo文字或者图片。

因为之前用的生成之后的二维码很难看，所以在网上找是否可以添加样式，下面记录一下。生成的二维码前后对比图如下，给图片加了个边框，之后这个好看一点吧。

    

第一步 引入文件

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-qrcode.min.js"></script>

第二步 html中插入一个div

<div id="container"></div>
<img id="qr-img" src="/xx/xxx.png" hidden >

第三步 js调用及参数设置

网上看别人调用的时候，用到的参数只有几个，后来看官方更新的文档中，添加了几个比较实用的属性(设置二维码边距及二维码中间的logo文字或者图片)。

var $option = {
    render: 'image', // render method: 'canvas', 'image' or 'div' 渲染模式 三种，因为我需要生成图片，以便用户下载，选的'image'
    minVersion: 1, // version range somewhere in 1 .. 40
    maxVersion: 40,
    ecLevel: 'L', // error correction level: 'L', 'M', 'Q' or 'H' 识别度 H最高
    size: 200, // size in pixel  画布大小
    left: 0,  // offset in pixel if drawn onto existing canvas
    top: 0,
    fill: '#000',  // code color or image element
    background: '#fff', // background color or image element, null for transparent background
    text: 'no text', // content
    radius: 0, // corner radius relative to module width: 0.0 .. 0.5
    quiet: 2, // quiet zone in modules  白边的块数
    mode: 4,  // modes / 0: normal / 1: label strip / 2: label box / 3: image strip / 4: image box
    // 5种模式： 0是普通 / 1是标语占中间一行 / 2标语占中间一块 / 3图片站中间一行 / 4图片占中间一块 较常用的是4
    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,
    label: 'no label',
    fontname: 'sans',
    fontcolor: '#000',
    image: $("#qr-img")[0] //选择放在中间的图片，原先我写的路径 无效，后来用这种方法可以拿到
}
$('#container').qrcode($option);

上面就已经完成了配置。

原先的插件没有生成image的模式，所以我是先生成canvas然后转图片的，代码如下。

var canvas = $("#container canvas")[0];
var img = canvas.toDataURL("image/jpeg");
$('#container').html('<img src="'+img+'" />');