Javascript qr Code Generator with Logo

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