<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <div class="container"> <h1>QR Code Generator</h1> <p class="subtitle">Create custom QR codes with your logo</p> <div class="input-group"> <label for="qrText">Enter Text or URL</label> <input type="text" id="qrText" placeholder="https://example.com or any text"> </div> <div class="input-group"> <label>Upload Logo (Optional)</label> <div class="file-input-wrapper"> <label for="logoInput" class="file-input-btn"> <ion-icon name="cloud-upload-outline"></ion-icon> <span id="fileLabel">Choose Image</span> </label> <input type="file" id="logoInput" accept="image/*"> </div> <div class="logo-preview" id="logoPreview"> <img id="logoImg" src="" alt="Logo preview"> <div class="logo-preview-name" id="logoName"></div> </div> </div> <button class="generate-btn" onclick="generateQR()"> <ion-icon name="qr-code-outline"></ion-icon> Generate QR Code </button> <div class="qr-container" id="qrContainer"> <div id="qrcode"></div> <button class="download-btn" onclick="downloadQR()"> <ion-icon name="download-outline"></ion-icon> Download QR Code </button> </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .container { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 500px; width: 100%; padding: 40px; } h1 { text-align: center; color: #333; margin-bottom: 10px; font-size: 28px; } .subtitle { text-align: center; color: #666; margin-bottom: 30px; font-size: 14px; } .input-group { margin-bottom: 24px; } label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; font-size: 14px; } input[type="text"], input[type="url"] { width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="url"]:focus { outline: none; border-color: #667eea; } .file-input-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; } .file-input-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: #f8f9fa; border: 2px dashed #d0d0d0; border-radius: 8px; color: #666; cursor: pointer; transition: all 0.3s; } .file-input-btn:hover { background: #f0f0f0; border-color: #667eea; } .file-input-btn ion-icon { font-size: 20px; } input[type="file"] { position: absolute; left: -9999px; } .logo-preview { margin-top: 12px; text-align: center; display: none; } .logo-preview img { max-width: 80px; max-height: 80px; border-radius: 8px; border: 2px solid #e0e0e0; } .logo-preview-name { margin-top: 8px; font-size: 12px; color: #666; } .generate-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .generate-btn:hover { transform: translateY(-2px); } .generate-btn ion-icon { font-size: 22px; } .qr-container { margin-top: 30px; padding: 30px; background: #f8f9fa; border-radius: 12px; display: none; } #qrcode { display: flex; justify-content: center; align-items: center; position: relative; } #qrcode canvas { border-radius: 8px; } .download-btn { width: 100%; margin-top: 20px; padding: 12px; background: #10b981; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; } .download-btn:hover { background: #059669; } .download-btn ion-icon { font-size: 20px; }
let logoImage = null; let qrCodeInstance = null; // Handle logo file selection document.getElementById('logoInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(event) { logoImage = event.target.result; document.getElementById('logoImg').src = logoImage; document.getElementById('logoName').textContent = file.name; document.getElementById('logoPreview').style.display = 'block'; document.getElementById('fileLabel').textContent = 'Change Image'; }; reader.readAsDataURL(file); } }); function generateQR() { const text = document.getElementById('qrText').value.trim(); if (!text) { alert('Please enter text or URL'); return; } // Clear previous QR code completely const qrDiv = document.getElementById('qrcode'); qrDiv.innerHTML = ''; // Clear any existing QR code instance if (qrCodeInstance) { qrCodeInstance = null; } // Generate new QR code qrCodeInstance = new QRCode(qrDiv, { text: text, width: 280, height: 280, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }); // Wait for QR code to be generated, then add logo setTimeout(() => { if (logoImage) { addLogoToQR(); } document.getElementById('qrContainer').style.display = 'block'; }, 200); } function addLogoToQR() { const canvas = document.querySelector('#qrcode canvas'); if (!canvas || !logoImage) return; const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function() { // Calculate logo size (20% of QR code) const logoSize = canvas.width * 0.2; const x = (canvas.width - logoSize) / 2; const y = (canvas.height - logoSize) / 2; // Draw white background for logo ctx.fillStyle = 'white'; ctx.fillRect(x - 5, y - 5, logoSize + 10, logoSize + 10); // Draw logo ctx.drawImage(img, x, y, logoSize, logoSize); }; img.src = logoImage; } function downloadQR() { const canvas = document.querySelector('#qrcode canvas'); if (!canvas) { alert('Please generate a QR code first'); return; } // Create download link const url = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.download = 'qrcode-with-logo.png'; link.href = url; link.click(); } // Generate on Enter key document.getElementById('qrText').addEventListener('keypress', function(e) { if (e.key === 'Enter') { generateQR(); } });
Login to leave a comment
No comments yet. Be the first!
View Project
No comments yet. Be the first!