diff --git a/README.md b/README.md index 95e6cd4..25a1b2a 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,21 @@ These are all over the net, spammed with ads. There are also a few here in github but often with too many options and clutter. I thought I'd throw together a simple one. +## Embedding + +Make an frame `https://greggman.github.io/qr-code/embed.html?s=` + +Example: + +```html + +``` + ## License MIT diff --git a/embed/embed.js b/embed/embed.js new file mode 100644 index 0000000..eaab3d9 --- /dev/null +++ b/embed/embed.js @@ -0,0 +1,23 @@ +import { showQRCode } from '../qr.js'; + +const errorElem = document.querySelector('#error'); +const canvasElem = document.querySelector('canvas'); +const ctx = canvasElem.getContext('2d'); + +function showError(msg) { + canvasElem.style.display = 'none'; + errorElem.style.display = ''; + errorElem.firstElementChild.textContent = msg; +} + +try { + const url = new URL(window.location.href); + const s = url.searchParams.get('s'); + if (!s) { + showError('no input') + } else { + showQRCode(ctx, s); + } +} catch (e) { + showError(e.toString()); +} \ No newline at end of file diff --git a/embed/index.html b/embed/index.html new file mode 100644 index 0000000..ca05aa7 --- /dev/null +++ b/embed/index.html @@ -0,0 +1,57 @@ + + + + + + QR Code + + + + + + + + diff --git a/index.html b/index.html index 6e70e6c..1a0ac30 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,12 @@ --bg-color: #333; } } + html { + box-sizing: border-box; + } + *, *:before, *:after { + box-sizing: inherit; + } html, body { font-family: monospace; background-color: var(--bg-color); @@ -33,10 +39,19 @@ canvas { display: block; } + .header { + display: flex; + justify-content: space-between; + align-items: center; + } + h1 { + margin-top: 0.25em; + margin-bottom: 0.25em; + } -

QR Code Generator

+

QR Code Generator

github
diff --git a/index.js b/index.js index a627145..21e5706 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,4 @@ -console.log('here'); - -import { QrCode, Ecc } from './qrcodegen.js'; +import { showQRCode } from './qr.js'; const saveBlob = (function() { const a = document.createElement('a'); @@ -36,24 +34,5 @@ function updateQRCode(s) { if (!s) { return; } - let qr; - try { - qr = QrCode.encodeText(s, Ecc.MEDIUM); - } catch (e) { - errorElem.textContent = e.toString(); - } - 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); - } - } + showQRCode(ctx, s); } - -console.log('here'); \ No newline at end of file diff --git a/qr.js b/qr.js new file mode 100644 index 0000000..983345e --- /dev/null +++ b/qr.js @@ -0,0 +1,17 @@ +import { QrCode, Ecc } from './qrcodegen.js'; + +export function showQRCode(ctx, s) { + 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); + } + } +}