From 9358c59343317df7d11620a24f32d4411b8312f7 Mon Sep 17 00:00:00 2001 From: David Dickinson <36966460+rnddave@users.noreply.github.com> Date: Tue, 14 May 2024 11:38:05 +0100 Subject: [PATCH] working with ChatGPT to correct the missing QR preview --- index.html | 5 +- script.js | 155 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 105 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index bc61a32..3299cda 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,13 @@

QR Code Generator



- +
- + + diff --git a/script.js b/script.js index 4eed202..fff91c1 100644 --- a/script.js +++ b/script.js @@ -1,58 +1,107 @@ -document.getElementById('qr-form').addEventListener('submit', function(event) { - event.preventDefault(); - - const url = document.getElementById('url').value; - const logoFile = document.getElementById('logo').files[0]; - const format = document.getElementById('format').value; - - const qrCodeDiv = document.createElement('div'); - qrCodeDiv.id = 'qr-code'; - - // Generate the QR code - QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) { - if (error) console.error(error); - - const qrCanvas = qrCodeDiv.querySelector('canvas'); - - const context = qrCanvas.getContext('2d'); - const image = new Image(); - - const reader = new FileReader(); - reader.onload = function(e) { - image.onload = function() { - const logoSize = 50; - const x = (qrCanvas.width - logoSize) / 2; - const y = (qrCanvas.height - logoSize) / 2; - context.drawImage(image, x, y, logoSize, logoSize); - - // Convert to desired format and show preview - let imgDataUrl; - if (format === 'png') { - imgDataUrl = qrCanvas.toDataURL('image/png'); - } else if (format === 'svg') { - // For simplicity, we convert the canvas to PNG and then to SVG using html2canvas - html2canvas(qrCanvas).then(canvas => { - imgDataUrl = canvas.toDataURL('image/png'); - download(imgDataUrl, `qr_code.${format}`); - }); - return; - } +document.addEventListener('DOMContentLoaded', function() { + const urlInput = document.getElementById('url'); + const logoInput = document.getElementById('logo'); + const formatSelect = document.getElementById('format'); + const generateButton = document.getElementById('generate-btn'); + + urlInput.addEventListener('input', updateQRCode); + logoInput.addEventListener('change', updateQRCode); + generateButton.addEventListener('click', generateQRCode); + + function updateQRCode() { + const url = urlInput.value; + const logoFile = logoInput.files[0]; + + if (!url || !logoFile) { + return; + } + + const qrCodeDiv = document.createElement('div'); + qrCodeDiv.id = 'qr-code'; - displayResult(imgDataUrl, format); + QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) { + if (error) console.error(error); + + const qrCanvas = qrCodeDiv.querySelector('canvas'); + const context = qrCanvas.getContext('2d'); + const image = new Image(); + + const reader = new FileReader(); + reader.onload = function(e) { + image.onload = function() { + const logoSize = 50; + const x = (qrCanvas.width - logoSize) / 2; + const y = (qrCanvas.height - logoSize) / 2; + context.drawImage(image, x, y, logoSize, logoSize); + + const imgDataUrl = qrCanvas.toDataURL('image/png'); + displayPreview(imgDataUrl); + } + image.src = e.target.result; } - image.src = e.target.result; + reader.readAsDataURL(logoFile); + }); + } + + function displayPreview(imgDataUrl) { + const qrPreview = document.getElementById('qr-preview'); + qrPreview.innerHTML = `QR Code Preview`; + } + + function generateQRCode() { + const url = urlInput.value; + const logoFile = logoInput.files[0]; + const format = formatSelect.value; + + if (!url || !logoFile) { + alert("Please provide a URL and a logo image."); + return; } - reader.readAsDataURL(logoFile); - }); -}); -function displayResult(imgDataUrl, format) { - const qrPreview = document.getElementById('qr-preview'); - qrPreview.innerHTML = `QR Code Preview`; + const qrCodeDiv = document.createElement('div'); + qrCodeDiv.id = 'qr-code'; + + QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) { + if (error) console.error(error); + + const qrCanvas = qrCodeDiv.querySelector('canvas'); + const context = qrCanvas.getContext('2d'); + const image = new Image(); + + const reader = new FileReader(); + reader.onload = function(e) { + image.onload = function() { + const logoSize = 50; + const x = (qrCanvas.width - logoSize) / 2; + const y = (qrCanvas.height - logoSize) / 2; + context.drawImage(image, x, y, logoSize, logoSize); + + let imgDataUrl; + if (format === 'png') { + imgDataUrl = qrCanvas.toDataURL('image/png'); + } else if (format === 'svg') { + html2canvas(qrCanvas).then(canvas => { + imgDataUrl = canvas.toDataURL('image/png'); + download(imgDataUrl, `qr_code.${format}`); + }); + return; + } - const downloadLink = document.getElementById('download-link'); - downloadLink.style.display = 'block'; - downloadLink.href = imgDataUrl; - downloadLink.download = `qr_code.${format}`; - downloadLink.textContent = `Download as ${format}`; -} + displayResult(imgDataUrl, format); + } + image.src = e.target.result; + } + reader.readAsDataURL(logoFile); + }); + } + + function displayResult(imgDataUrl, format) { + displayPreview(imgDataUrl); + + const downloadLink = document.getElementById('download-link'); + downloadLink.style.display = 'block'; + downloadLink.href = imgDataUrl; + downloadLink.download = `qr_code.${format}`; + downloadLink.textContent = `Download as ${format}`; + } +});