<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>

<h2>图片转 Base64</h2>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="imageFile">
  <button class="btn btn-primary" onclick="convertImageToBase64()">转换为 Base64</button>
</div>
<textarea id="base64String" rows="10" cols="50" readonly class="form-control mb-3"></textarea>
<div class="input-group mb-3">
  <button class="btn btn-primary" onclick="copyBase64String()">复制 Base64 内容</button>
  <button class="btn btn-primary" onclick="copyBase64String(true)">复制 Base64 内容（带 a 标签）</button>
</div>

<script>
    function convertImageToBase64() {
        // 创建一个 FileReader 对象
        var reader = new FileReader();

        // 选择要转换的图片文件
        var imageFile = document.getElementById("imageFile").files[0];

        // 监听 FileReader 的 load 事件，对图片文件进行处理
        reader.onload = function(event) {
            // 获取转换后的 Base64 格式字符串
            var base64String = event.target.result;

            // 将 Base64 字符串显示在文本区域中
            document.getElementById("base64String").value = base64String;
        };

        // 开始读取图片文件，将其转换为 Base64 格式字符串
        reader.readAsDataURL(imageFile);
    }

    function copyBase64String(withTag = false) {
        // 获取文本区域中的 Base64 字符串
        var base64String = document.getElementById("base64String").value;

        if (withTag) {
            base64String = "<img src=\"" + base64String + "\"/>"
        }

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

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

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

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

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

        // 提示复制成功
        showTip("已复制 Base64 内容", "info");
    }
</script>

<h2>显示 Base64 为图片</h2>

<textarea id="base64StringForDisplay" rows="10" cols="50"  class="form-control mb-3"></textarea>
<div class="input-group mb-3">
  <button class="btn btn-primary" onclick="displayBase64StringToImage()">显示为图片</button>
</div>
<img id="displayImage" src="" />

<script>
    function displayBase64StringToImage() {
        // 获取文本区域中的 Base64 字符串
        var base64String = document.getElementById("base64StringForDisplay").value;
        // 显示 Base64 到图片
        document.getElementById("displayImage").setAttribute("src", base64String);
    }
</script>