生成与解析二维码图片

本站地址
代码

html
<h1>生成与解析二维码图片</h1>

<h2>生成二维码图片</h2>

<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<div class="input-group mb-3">
  <input type="text" id="inputText" class="form-control" placeholder="输入字符串">
  <button class="btn btn-primary" type="button" onclick="generateQRCode()">生成</button>
  <button class="btn btn-primary" type="button" onclick="copyGenerateQRCode()">复制</button>
  <button class="btn btn-primary" type="button" onclick="copyGenerateQRCodeWithA()">复制（带 a 标签）</button>
</div>

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

<h2>二维码图片读取</h2>

<script type="text/javascript" src="https://unpkg.com/qrcode-parser@1.2.0/dist/qrcode-parser.min.js"></script>
<div class="input-group mb-3">
  <input type="file" id="qrImageInput" accept="image/*" class="form-control" id="inputGroupFile01">
  <button class="btn btn-primary" type="button" onclick="copyDecodedText()">复制</button>
</div>
</div>
<textarea id="qrCanvasResult" rows="4" cols="50" class="form-control" readonly></textarea>

<script>
    function generateQRCode() {
        const qrcodeDiv = document.getElementById("qrcode");
        qrcodeDiv.innerHTML = "";
        const qrcode = new QRCode(qrcodeDiv, {
            text: document.getElementById("inputText").value,
            width: 256,
            height: 256
        });
    }

    function copyGenerateQRCode() {
        copy(document.getElementById("qrcode").getElementsByTagName("img")[0].getAttribute("src"), false);
    }

    function copyGenerateQRCodeWithA() {
        copy(document.getElementById("qrcode").getElementsByTagName("img")[0].getAttribute("src"), true);
    }

    function copyDecodedText() {
        copy(document.getElementById("qrCanvasResult").textContent, false);
    }

    function copy(value, withTag) {
        if (withTag) {
            value = "<img src=\"" + value + "\"/>"
        }

        // 创建一个临时文本输入框
        var tempInput = document.createElement("input");
        tempInput.setAttribute("type", "text");
        tempInput.setAttribute("value", value);

        // 将临时文本输入框添加到页面中
        document.body.appendChild(tempInput);

        // 选中临时文本输入框中的内容
        tempInput.select();

        // 复制选中的内容
        document.execCommand("copy");

        // 移除临时文本输入框
        document.body.removeChild(tempInput);

        // 提示复制成功
        showTip("已复制到剪切板", "info");
    }

    document.getElementById("qrImageInput").addEventListener("change", function (event) {
        // console.log('qrImageInput changed');
        var file = event.target.files[0];
        // console.log('file === ', file);
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var imageData = e.target.result;

                // 解析二维码
                qrcodeParser(imageData)
                    .then(function (result) {
                        // 显示解析结果
                        document.getElementById("qrCanvasResult").textContent = result.data;
                    })
                    .catch(function (error) {
                        console.error(error);
                        document.getElementById("qrCanvasResult").textContent = error;
                    });
            };
            reader.readAsDataURL(file);
        }
    });
</script>
生成与解析二维码图片 ​

代码 ​

生成与解析二维码图片

代码
