qrcode/script.js

document.addEventListener("DOMContentLoaded", function () {
    const qrContent = document.getElementById("qrContent");
    const qrTitle = document.getElementById("qrTitle");
    const centerText = document.getElementById("centerText");
    const generateBtn = document.getElementById("generateBtn");
    const printBtn = document.getElementById("printBtn");
    const qrcodeDiv = document.getElementById("qrcode");

    // 初始化表单验证
    $('.ui.form').form({
        fields: {
            qrContent: 'empty'
        }
    });

    // 生成按钮点击事件
    generateBtn.addEventListener("click", function() {
        if (!qrContent.value.trim()) {
            alert('请输入要生成二维码的内容');
            return;
        }
        generateQRCode();
    });

    // 打印按钮点击事件
    printBtn.addEventListener("click", function() {
        if (!qrContent.value.trim()) {
            alert('请先输入内容并生成二维码再打印');
            return;
        }
        
        // 确保二维码已经生成
        if (!qrcodeDiv.querySelector('canvas')) {
            generateQRCode();
            setTimeout(() => {
                preparePrintAndPrint();
            }, 300);
        } else {
            preparePrintAndPrint();
        }
    });
    
    // 准备打印并执行打印
    function preparePrintAndPrint() {
        const canvas = qrcodeDiv.querySelector('canvas');
        if (!canvas) {
            alert('生成二维码失败，请重试');
            return;
        }
        
        // 准备打印内容
        const printContainer = document.getElementById('print-container');
        printContainer.innerHTML = '';
        
        // 创建打印专用的大尺寸二维码
        const printCanvas = document.createElement('canvas');
        printCanvas.width = 750;  // A4纸宽度的大约90%
        
        const title = qrTitle.value.trim();
        const text = centerText.value.trim();
        
        // 计算尺寸
        const titleSize = 32;
        const qrSize = 600;
        const textSize = 24;
        const padding = 40;
        
        // 计算文字行数
        const textLines = text ? text.split('\n').length : 0;
        const textHeight = textLines * textSize * 1.5;
        
        // 设置画布高度
        printCanvas.height = (title ? titleSize * 2 : 0) + qrSize + (text ? textHeight + padding : 0) + padding * 2;
        
        // 获取上下文并填充背景
        const ctx = printCanvas.getContext('2d');
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, printCanvas.width, printCanvas.height);
        
        // 绘制标题
        let yPos = padding;
        if (title) {
            ctx.font = `bold ${titleSize}px "Microsoft YaHei", sans-serif`;
            ctx.fillStyle = '#333333';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(title, printCanvas.width / 2, yPos);
            yPos += titleSize * 2;
        }
        
        // 重新生成高质量二维码
        const tempQR = document.createElement('div');
        new QRCode(tempQR, {
            text: qrContent.value,
            width: qrSize,
            height: qrSize,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
        
        // 等待二维码生成
        setTimeout(() => {
            try {
                const qrImage = tempQR.querySelector('canvas');
                const xPos = (printCanvas.width - qrSize) / 2;
                
                // 绘制二维码
                ctx.drawImage(qrImage, xPos, yPos);
                yPos += qrSize + padding;
                
                // 绘制底部文字
                if (text) {
                    ctx.font = `${textSize}px "Microsoft YaHei", sans-serif`;
                    ctx.fillStyle = '#333333';
                    ctx.textAlign = 'center';
                    
                    text.split('\n').forEach((line, i) => {
                        ctx.fillText(line, printCanvas.width / 2, yPos + (textSize * 1.5 * i));
                    });
                }
                
                // 添加到打印容器
                printContainer.appendChild(printCanvas);
                
                // 开始打印
                window.print();
                
            } catch (err) {
                console.error('打印准备失败:', err);
                alert('打印准备失败，请重试');
            }
        }, 200);
    }

    function generateQRCode() {
        qrcodeDiv.innerHTML = "";
        
        // 获取预览容器的尺寸
        const previewContainer = document.querySelector('.preview-content');
        const containerWidth = previewContainer.offsetWidth;
        const containerHeight = previewContainer.offsetHeight;
        
        // 计算二维码大小
        const qrWidth = Math.min(containerWidth * 0.9, containerHeight * 0.7);
        
        // 文字大小
        const titleSize = Math.max(24, Math.floor(qrWidth * 0.06));
        const textSize = Math.max(18, Math.floor(qrWidth * 0.05));
        const padding = Math.floor(qrWidth * 0.08);
        
        const title = qrTitle.value.trim();
        const text = centerText.value.trim();
        
        // 计算二维码实际大小
        const qrImageSize = Math.min(qrWidth * 0.8, containerHeight * 0.6);
        
        // 计算高度
        const titleHeight = title ? titleSize + padding : 0;
        const textLines = text ? text.split('\n').length : 0;
        const textHeight = text ? (textSize * textLines * 1.5 + padding) : padding;
        const totalHeight = titleHeight + qrImageSize + textHeight;
        
        // 创建画布
        const canvas = document.createElement('canvas');
        canvas.width = qrWidth;
        canvas.height = totalHeight;
        
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 绘制标题
        let yPos = padding/2;
        if (title) {
            ctx.font = `bold ${titleSize}px "Microsoft YaHei", sans-serif`;
            ctx.fillStyle = '#333333';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(title, qrWidth/2, yPos);
            yPos += titleSize + padding/2;
        }
        
        // 生成二维码
        const tempDiv = document.createElement('div');
        new QRCode(tempDiv, {
            text: qrContent.value,
            width: qrImageSize,
            height: qrImageSize,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        
        // 绘制二维码和文字
        setTimeout(() => {
            const qrImage = tempDiv.querySelector('canvas');
            if (!qrImage) return;
            
            // 绘制二维码
            const xOffset = (qrWidth - qrImageSize) / 2;
            ctx.drawImage(qrImage, xOffset, yPos);
            yPos += qrImageSize + padding/2;
            
            // 绘制底部文字
            if (text) {
                const lines = text.split('\n');
                ctx.font = `${textSize}px "Microsoft YaHei", sans-serif`;
                ctx.fillStyle = '#333333';
                ctx.textAlign = 'center';
                
                lines.forEach((line, i) => {
                    ctx.fillText(line, qrWidth/2, yPos + (textSize * 1.5 * i));
                });
            }
            
            // 添加到DOM
            qrcodeDiv.appendChild(canvas);
        }, 100);
    }

    // 窗口调整时重新生成二维码
    window.addEventListener('resize', debounce(() => {
        if (qrContent.value.trim() && qrcodeDiv.childElementCount > 0) {
            generateQRCode();
        }
    }, 300));
    
    // 防抖函数
    function debounce(func, wait) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(func, wait);
        };
    }
});