initial commit

greggman · Nov 2, 2024 · 71d793c · 71d793c
commit 71d793c
Show file tree

Hide file tree

Showing 3 changed files with 926 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <title>QR Code Generator</title>
+    <script type="module" src="index.js"></script>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg-color: #eee;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg-color: #333;
+        }
+      }
+      html, body {
+        font-family: monospace;
+      }
+      #text {
+        width: 100%;
+      }
+      button {
+        display: block;
+        margin: 0.5em 0 0.5em;
+      }
+      canvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>QR Code Generator</h1>
+    <textarea id="text" placeholder="enter url (etc...) here"></textarea>
+    <button id="download" type="button" disabled>download qr code</button>
+    <canvas></canvas>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,60 @@
+console.log('here');
+
+import { QrCode, Ecc } from './qrcodegen.js';
+
+const saveBlob = (function() {
+  const a = document.createElement('a');
+  document.body.appendChild(a);
+  a.style.display = 'none';
+  return function saveData(blob, fileName) {
+     const url = window.URL.createObjectURL(blob);
+     a.href = url;
+     a.download = fileName;
+     a.click();
+  };
+}());
+
+const textElem = document.querySelector('#text');
+const canvasElem = document.querySelector('canvas');
+const downloadElem = document.querySelector('#download');
+const ctx = canvasElem.getContext('2d');
+
+textElem.addEventListener('input', () => {
+  updateQRCode(textElem.value);
+});
+
+downloadElem.addEventListener('click', () => {
+  canvasElem.toBlob(blob => saveBlob(blob, 'qr-code'));
+});
+
+
+function updateQRCode(s) {
+  downloadElem.disabled = s ? '' : true;
+  if (!s) {
+    canvasElem.width = 1;
+    return;
+  }
+  const qr = QrCode.encodeText(s, Ecc.MEDIUM);
+  const scale = 4;
+  const padding = 3;
+  const size = qr.size + padding * 2;
+  ctx.canvas.width = size * scale;
+  ctx.canvas.height = size * scale;
+  ctx.scale(scale, scale);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      ctx.fillStyle = qr.getModule(x - padding, y - padding) ? 'black' : 'white';
+      ctx.fillRect(x, y, 1, 1);
+    }
+  }
+  //const img = new Image();
+  //img.src = ctx.canvas.toDataURL();
+  //qrCodesElem.appendChild(el('div', {
+  //  className: 'qrcode',
+  //}, [
+  //  el('div', {textContent: s}),
+  //  img,
+  //]));
+}
+
+console.log('here');