testing version 3 for the QR Code gen

rnddave · May 14, 2024 · 89ae638 · 89ae638
1 parent 2e2e3a6
commit 89ae638
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 121 deletions.
diff --git a/generate-qr.js b/generate-qr.js
@@ -0,0 +1,66 @@
+const express = require('express');
+const multer = require('multer');
+const QRCode = require('qrcode');
+const sharp = require('sharp');
+const path = require('path');
+const fs = require('fs');
+
+const app = express();
+const upload = multer({ dest: 'uploads/' });
+
+app.use(express.static('public'));
+
+app.post('/generate-qr', upload.single('logo'), async (req, res) => {
+    const { url } = req.body;
+    const logoPath = req.file.path;
+
+    try {
+        // Resize logo
+        const logoBuffer = await sharp(logoPath).resize(50, 50).toBuffer();
+        const logoBase64 = logoBuffer.toString('base64');
+
+        // Generate QR code
+        const qrOptions = {
+            errorCorrectionLevel: 'H',
+            type: 'png',
+            quality: 0.92,
+            margin: 1,
+            color: {
+                dark: '#000000',
+                light: '#ffffff'
+            }
+        };
+
+        const qrCodeData = await QRCode.toDataURL(url, qrOptions);
+        const qrImageBuffer = Buffer.from(qrCodeData.split(',')[1], 'base64');
+
+        // Add logo to QR code
+        const qrWithLogo = await sharp(qrImageBuffer)
+            .composite([{ input: logoBuffer, gravity: 'center' }])
+            .toBuffer();
+
+        const previewUrl = `data:image/png;base64,${qrWithLogo.toString('base64')}`;
+
+        // Save QR code as file
+        const outputFormat = 'png'; // Can be 'png', 'pdf', or 'svg' based on user choice
+        const outputFilename = `qr-code.${outputFormat}`;
+        await sharp(qrWithLogo).toFile(path.join('public', outputFilename));
+
+        res.json({
+            previewUrl,
+            downloadUrl: `/${outputFilename}`,
+            filename: outputFilename,
+            format: outputFormat
+        });
+    } catch (error) {
+        res.status(500).send({ error: 'QR Code generation failed' });
+    } finally {
+        // Clean up uploaded logo file
+        fs.unlinkSync(logoPath);
+    }
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
+});
diff --git a/html-css-js-v2/index.html b/html-css-js-v2/index.html
@@ -0,0 +1,37 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QR Code Generator</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>QR Code Generator</h1>
+    <form id="qrForm">
+      <div class="form-group">
+        <label for="url">URL:</label>
+        <input type="url" id="url" name="url" required>
+      </div>
+      <div class="form-group">
+        <label for="logo">Logo:</label>
+        <input type="file" id="logo" name="logo" accept="image/*" required>
+        <img id="logoPreview" src="" alt="Logo Preview" style="display: none;">
+      </div>
+      <button type="submit">Generate QR Code</button>
+    </form>
+    <div class="qr-preview">
+      <img id="qrCodeImage" src="" alt="QR Code Preview">
+      <div class="download-options">
+        <button id="downloadPNG">Download PNG</button>
+        <button id="downloadPDF">Download PDF</button>
+        <button id="downloadSVG">Download SVG</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/html-css-js-v2/script.js b/html-css-js-v2/script.js
@@ -0,0 +1,95 @@
+// script.js
+const form = document.getElementById('qrForm');
+const logoInput = document.getElementById('logo');
+const logoPreview = document.getElementById('logoPreview');
+const qrCodeImage = document.getElementById('qrCodeImage');
+const downloadPNG = document.getElementById('downloadPNG');
+const downloadPDF = document.getElementById('downloadPDF');
+const downloadSVG = document.getElementById('downloadSVG');
+
+logoInput.addEventListener('change', () => {
+  const file = logoInput.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      logoPreview.src = reader.result;
+      logoPreview.style.display = 'inline-block';
+    };
+    reader.readAsDataURL(file);
+  }
+});
+
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const url = document.getElementById('url').value;
+  const logo = logoInput.files[0];
+
+  const formData = new FormData();
+  formData.append('url', url);
+  formData.append('logo', logo);
+
+  try {
+    const response = await fetch('/generate-qr-code', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (response.ok) {
+      const blob = await response.blob();
+      const imageUrl = URL.createObjectURL(blob);
+      qrCodeImage.src = imageUrl;
+    } else {
+      console.error('Error generating QR code:', response.statusText);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadPNG.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=png');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadPDF.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=pdf');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.pdf';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadSVG.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=svg');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.svg';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
diff --git a/server.js → html-css-js-v2/server.js b/server.js → html-css-js-v2/server.js
diff --git a/styles.css → html-css-js-v2/styles.css b/styles.css → html-css-js-v2/styles.css
diff --git a/index.html b/index.html
@@ -1,37 +1,22 @@
-<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>QR Code Generator</title>
-  <link rel="stylesheet" href="styles.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Generator</title>
 </head>
 <body>
-  <div class="container">
     <h1>QR Code Generator</h1>
-    <form id="qrForm">
-      <div class="form-group">
-        <label for="url">URL:</label>
-        <input type="url" id="url" name="url" required>
-      </div>
-      <div class="form-group">
-        <label for="logo">Logo:</label>
-        <input type="file" id="logo" name="logo" accept="image/*" required>
-        <img id="logoPreview" src="" alt="Logo Preview" style="display: none;">
-      </div>
-      <button type="submit">Generate QR Code</button>
+    <form id="qr-form" enctype="multipart/form-data">
+        <label for="url">Target URL:</label>
+        <input type="text" id="url" name="url" required><br><br>
+        <label for="logo">Logo Image:</label>
+        <input type="file" id="logo" name="logo" accept="image/*" required><br><br>
+        <button type="submit">Generate QR Code</button>
     </form>
-    <div class="qr-preview">
-      <img id="qrCodeImage" src="" alt="QR Code Preview">
-      <div class="download-options">
-        <button id="downloadPNG">Download PNG</button>
-        <button id="downloadPDF">Download PDF</button>
-        <button id="downloadSVG">Download SVG</button>
-      </div>
-    </div>
-  </div>
+    <div id="qr-preview"></div>
+    <a id="download-link" style="display:none;">Download</a>
 
-  <script src="script.js"></script>
+    <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,95 +1,19 @@
-// script.js
-const form = document.getElementById('qrForm');
-const logoInput = document.getElementById('logo');
-const logoPreview = document.getElementById('logoPreview');
-const qrCodeImage = document.getElementById('qrCodeImage');
-const downloadPNG = document.getElementById('downloadPNG');
-const downloadPDF = document.getElementById('downloadPDF');
-const downloadSVG = document.getElementById('downloadSVG');
-
-logoInput.addEventListener('change', () => {
-  const file = logoInput.files[0];
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = () => {
-      logoPreview.src = reader.result;
-      logoPreview.style.display = 'inline-block';
-    };
-    reader.readAsDataURL(file);
-  }
-});
-
-form.addEventListener('submit', async (event) => {
-  event.preventDefault();
-  const url = document.getElementById('url').value;
-  const logo = logoInput.files[0];
-
-  const formData = new FormData();
-  formData.append('url', url);
-  formData.append('logo', logo);
-
-  try {
-    const response = await fetch('/generate-qr-code', {
-      method: 'POST',
-      body: formData,
+document.getElementById('qr-form').addEventListener('submit', async function(event) {
+    event.preventDefault();
+
+    const formData = new FormData(this);
+    const response = await fetch('/generate-qr', {
+        method: 'POST',
+        body: formData
     });
-
-    if (response.ok) {
-      const blob = await response.blob();
-      const imageUrl = URL.createObjectURL(blob);
-      qrCodeImage.src = imageUrl;
-    } else {
-      console.error('Error generating QR code:', response.statusText);
-    }
-  } catch (error) {
-    console.error('Error:', error);
-  }
+
+    const result = await response.json();
+    const qrPreview = document.getElementById('qr-preview');
+    qrPreview.innerHTML = `<img src="${result.previewUrl}" alt="QR Code Preview">`;
+
+    const downloadLink = document.getElementById('download-link');
+    downloadLink.style.display = 'block';
+    downloadLink.href = result.downloadUrl;
+    downloadLink.download = result.filename;
+    downloadLink.textContent = `Download as ${result.format}`;
 });
-
-downloadPNG.addEventListener('click', async () => {
-  try {
-    const response = await fetch('/download-qr-code?format=png');
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'qr-code.png';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  } catch (error) {
-    console.error('Error:', error);
-  }
-});
-
-downloadPDF.addEventListener('click', async () => {
-  try {
-    const response = await fetch('/download-qr-code?format=pdf');
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'qr-code.pdf';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  } catch (error) {
-    console.error('Error:', error);
-  }
-});
-
-downloadSVG.addEventListener('click', async () => {
-  try {
-    const response = await fetch('/download-qr-code?format=svg');
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'qr-code.svg';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  } catch (error) {
-    console.error('Error:', error);
-  }
-});