document.getElementById('generate-btn').addEventListener('click', () => { const text = document.getElementById('text-input').value; const canvas = document.getElementById('qr-code'); const downloadButtons = document.getElementById('download-buttons'); const foregroundColor = document.getElementById('foreground-color').value; const backgroundColor = document.getElementById('background-color').value; if (text) { // First, draw the basic QR code QRCode.toCanvas(canvas, text, { color: { dark: foregroundColor, light: backgroundColor } }, function (error) { if (error) { console.error(error); return; } console.log('QR code generated!'); downloadButtons.classList.remove('hidden'); // Show download buttons }); } }); // Download QR Code as SVG document.getElementById('download-svg').addEventListener('click', () => { const text = document.getElementById('text-input').value; const foregroundColor = document.getElementById('foreground-color').value; const backgroundColor = document.getElementById('background-color').value; const options = { color: { dark: foregroundColor, light: backgroundColor } }; if (text) { QRCode.toString(text, { type: 'svg', color: options.color }, function (error, svg) { if (error) { console.error(error); return; } const blob = new Blob([svg], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'qrcode.svg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }); } }); // Download QR Code as PNG document.getElementById('download-png').addEventListener('click', () => { const canvas = document.getElementById('qr-code'); canvas.toBlob(function (blob) { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'qrcode.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }, 'image/png'); }); // scan qr document.addEventListener("DOMContentLoaded", function () { const scanBtn = document.getElementById("scan-qr-btn"); const qrReader = document.getElementById("qr-reader"); const resultDisplay = document.getElementById("qr-result"); let scannerActive = false; scanBtn.addEventListener("click", function () { if (!scannerActive) { qrReader.style.display = "block"; // Show QR Scanner startScanner(); scanBtn.textContent = "Stop Scanner"; } else { stopScanner(); scanBtn.textContent = "Scan QR Code"; } scannerActive = !scannerActive; }); function startScanner() { const html5QrCode = new Html5Qrcode("qr-reader"); html5QrCode.start( { facingMode: "environment" }, // Use back camera { fps: 10, // Frames per second qrbox: 250, // Scanner size }, (decodedText) => { resultDisplay.innerHTML = `Scanned Result: ${decodedText}`; html5QrCode.stop(); // Stop scanning scannerActive = false; scanBtn.textContent = "Scan QR Code"; qrReader.style.display = "none"; }, (errorMessage) => { console.warn(errorMessage); // Log errors if needed } ).catch((err) => { console.error("Error starting scanner:", err); }); } function stopScanner() { Html5Qrcode.getCameras().then((cameras) => { if (cameras.length > 0) { const html5QrCode = new Html5Qrcode("qr-reader"); html5QrCode.stop(); qrReader.style.display = "none"; } }).catch((err) => { console.error("Error stopping scanner:", err); }); } }); // upload qr to scan it document.getElementById("qr-file").addEventListener("change", function (event) { const file = event.target.files[0]; if (!file) return; const html5QrCode = new Html5Qrcode("qr-reader"); html5QrCode.scanFile(file, true) .then(decodedText => { document.getElementById("qr-result").innerHTML = `Scanned Result: ${decodedText}`; }) .catch(err => console.error("QR Code not found", err)); });