NewHome/func/qrcode.php

<?php
/**
 * func/qrcode.php —— 二维码生成器
 * 使用 qrcodejs（CDN 双源加载）；支持尺寸调节、放大预览与 PNG 下载。
 */
$P = '../';
require_once dirname(__DIR__) . '/includes/layout.php';
require_once __DIR__ . '/_bar.php';

layout_head('二维码生成器');
func_bar('二维码生成器');
?>
<main class="page-main">
  <div class="wrap page-body">
    <div class="panel-card">
      <div class="field-row">
        <input type="text" id="qrText" placeholder="输入需要生成二维码的内容，如网址 / 文本…" style="flex:1;min-width:260px">
        <button type="button" class="btn btn-primary" id="qrGen">生成二维码</button>
        <button type="button" class="btn" id="qrClear">清空</button>
      </div>
      <div class="field-row">
        <label class="fl" style="margin:0">尺寸：<b id="qrSizeVal">300</b> px</label>
        <input type="range" id="qrSize" min="180" max="520" step="10" value="300" style="max-width:300px">
      </div>
      <div id="qrMsg"></div>

      <div class="qr-stage" id="qrStage" hidden>
        <div id="qrBox"></div>
        <div class="field-row" style="justify-content:center">
          <button type="button" class="btn" id="qrZoom">点击放大预览</button>
          <button type="button" class="btn btn-primary" id="qrDl">下载 PNG</button>
        </div>
      </div>
    </div>
  </div>
</main>

<?php layout_theme_fab(); ?>
<?php layout_footer(); ?>
<script src="../assets/js/common.js"></script>
<script>
(function () {
    'use strict';
    var CDNS = [
        'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',
        'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js'
    ];
    function $(id) { return document.getElementById(id); }

    function loadQR(cb) {
        if (window.QRCode) { cb(null); return; }
        var idx = 0;
        (function next() {
            if (window.QRCode) { cb(null); return; }
            if (idx >= CDNS.length) { cb(new Error('二维码组件加载失败，请检查网络后重试')); return; }
            var s = document.createElement('script');
            s.src = CDNS[idx++];
            s.onload = function () { cb(window.QRCode ? null : new Error('二维码组件加载失败')); };
            s.onerror = function () { next(); };
            document.head.appendChild(s);
        })();
    }

    var lastValue = '';
    function generate() {
        var value = $('qrText').value.trim();
        var msg = $('qrMsg');
        msg.innerHTML = '';
        if (!value) { msg.innerHTML = '<div class="err-msg">请输入内容。</div>'; $('qrText').focus(); return; }
        loadQR(function (err) {
            if (err) { msg.innerHTML = '<div class="err-msg">' + err.message + '</div>'; return; }
            if ($('qrText').value.trim() !== value) return; // 期间内容已变
            var size = parseInt($('qrSize').value, 10);
            var box = $('qrBox');
            box.innerHTML = '';
            try {
                new QRCode(box, {
                    text: value,
                    width: size,
                    height: size,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.M
                });
                lastValue = value;
                $('qrStage').hidden = false;
                msg.innerHTML = '<div class="ok-msg">二维码已生成。</div>';
            } catch (e) {
                box.innerHTML = '';
                msg.innerHTML = '<div class="err-msg">内容过长或生成失败，请缩短后重试。</div>';
            }
        });
    }

    function getDataURL() {
        var box = $('qrBox');
        var canvas = box.querySelector('canvas');
        if (canvas && canvas.toDataURL) return canvas.toDataURL('image/png');
        var img = box.querySelector('img');
        if (img && /^data:/i.test(img.src)) return img.src;
        return null;
    }

    function clearQR() {
        $('qrText').value = '';
        $('qrBox').innerHTML = '';
        $('qrStage').hidden = true;
        $('qrMsg').innerHTML = '';
        lastValue = '';
    }

    $('qrGen').addEventListener('click', generate);
    $('qrText').addEventListener('keydown', function (ev) { if (ev.key === 'Enter') generate(); });
    $('qrSize').addEventListener('input', function () {
        $('qrSizeVal').textContent = this.value;
        if (lastValue) generate();
    });
    $('qrClear').addEventListener('click', clearQR);

    $('qrDl').addEventListener('click', function () {
        if (!lastValue) return;
        var url = getDataURL();
        if (!url) { $('qrMsg').innerHTML = '<div class="err-msg">暂无法导出图片。</div>'; return; }
        var a = document.createElement('a');
        a.href = url;
        a.download = 'qrcode_' + Date.now() + '.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });

    $('qrZoom').addEventListener('click', function () {
        if (!lastValue) return;
        var url = getDataURL();
        var w = window.open('', '_blank');
        if (!w) { $('qrMsg').innerHTML = '<div class="err-msg">请允许浏览器弹窗以预览大图。</div>'; return; }
        w.document.write('<title>二维码预览</title><body style="margin:0;background:#fff;display:flex;align-items:center;justify-content:center;min-height:100vh">');
        if (url) {
            w.document.write('<img src="' + url + '" style="max-width:95vw;max-height:95vh;image-rendering:pixelated">');
        } else {
            w.document.write('<p>无法放大预览</p>');
        }
        w.document.write('</body>');
    });
})();
</script>
</body>
</html>