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); }; } });