qr-code-styling.js 前端生成自定义样式二维码

npm install qr-code-styling 安装

<script type="text/javascript" src="/qr-code-styling.js"></script>
<div id="qrcode"></div>
<script type="text/javascript">
    const qrCode = new QRCodeStyling({
        width: 200,  //宽
        height: 200,  //高
        type: "svg",  //生成格式
        data: "bitcoin:1FhDPLPnjY6gW55l9pr9hv9Knp6vN8ThZH?amount=0.00012345565464564", //要编码的内容
        image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
        qrOptions:{
            errorCorrectionLevel:"L",  //纠错
        },

        dotsOptions: {   //二维码设置
            color: "#002b28",  //颜色
            type: "dots"  //样式圆点
        },
        cornersSquareOptions:{  //大定位点设置
            type:"extra-rounded"
        },

        cornersDotOptions:{  //小定位点设置
            type:"dot"  //样式
        },

    });
    qrCode.append(document.getElementById("qrcode"));
</script>

如果不要样式有更简单的qrcode.js库：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="qrcode"/>
  </svg>

<script src="/qrcode.js" type="text/javascript"></script>
<script>
    var qr = new QRCode(document.getElementById("qrcode"), {
        text: "{text}",  //传入要编码的内容
        width: 200,  //宽
        height: 200,  //高
        colorDark : "#002b28",  //二维码前景色
        colorLight : "#ffffff",  //二维码背景色
        correctLevel : QRCode.CorrectLevel.L,  //纠错等级，有L,M,Q,H,默认L
        useSVG: true  //设置保存为svg 否则为png格式图片
    });
</script>