生成 自定义徽标和标签 二维码 jQuery.qrcode

  • 源码大小:115.81KB
  • 所需积分:1积分
  • 源码编号:19JP-3293
  • 浏览次数:408次
  • 最后更新:2023年05月27日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

一个强大的、高度可定制的二维码生成器,可帮助您动态生成带有自定义图像(用于徽标)和标签(用于行动呼吁文本)的二维码。

更多功能:

  • 基于画布、图像或DIV的二维码。
  • 5个纠错级别。
  • 边界半径。
  • 自定义背景和填充颜色。

如何使用它:

1.创建一个将在其中生成二维码的容器。

<div class="demo">
</div>

2.在关闭body标记之前加载jQuery库和jQuery.qrcode插件。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="dist/jquery-qrcode.js"></script>

3.调用二维码容器上的函数并定义内容。

$(".demo").qrcode({
   text: 'https://www.jqueryscript.net'
});

4.在二维码上添加标签。

$(".demo").qrcode({

  // 0: normal
  // 1: label strip
  // 2: label box
  mode: 1,
  label: 'jQueryScript.Net',
  fontname: 'sans',
  fontcolor: '#000'
  
});

5.在二维码中添加徽标图像。

$(".demo").qrcode({

  // 0: normal
  // 3: image strip
  // 4: image box
  mode: 3,
  image: "/path/to/logo.png"

});

6.更多具有默认值的配置选项。

$(".demo").qrcode({

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

  // min/max versions
  minVersion: 1,
  maxVersion: 40,

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

  // offset in pixels
  left: 0,
  top: 0,

  // size in pixels
  size: 200,

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

  // background color or image element
  background: null,

  // border radius
  radius: 0,

  // quiet zone in modules
  quiet: 0,

  // position options
  mSize: 0.1,
  mPosX: 0.5,
  mPosY: 0.5

});

更新日志:

2022-11-21

  • 版本0.18.0

预览截图