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