H5动态生成二维码(基于jQ与jquery.qrcode.js)

---

<div id="qrcode"></div>

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

<script type="text/javascript" src="../../js/jquery.qrcode.min.js"></script>

<script type="text/javascript">

         // 生成二维码

    jQuery('#qrcode').qrcode({

        render: "canvas", //也可以替换为table

        width: 131,

        height: 131,

        text: shareUrl

    });

</script>

---

下载插件

指定生成二维码的大小：

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

//生成100*100(宽度100，高度100)的二维码

jQuery('#qrcode').qrcode({

    render: "canvas", //也可以替换为table

    width: 100,

    height: 100,

    text: "http://www.jq22.com"

});

---

指定生成二维码的色彩样式：

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

//生成前景色为红色背景色为白色的二维码

jQuery('#qrcode').qrcode({

    render: "canvas", //也可以替换为table

    foreground: "#C00",

    background: "#FFF",

    text: "http://www.jq22.com"

});

---

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

---