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