qr-kit 2.1.0

package/utils/poster.js

@@ -0,0 +1,102 @@
+// utils/poster.js
+// Browser-side image compositing: background image + QR code.
+// No external dependencies.
+
+import { svgToPngDataURL, dataURLToImage, loadImage } from './raster.js';
+
+// ─── Data primitive ───────────────────────────────────────────────────────────
+
+/**
+ * Composites a QR code SVG onto a background image and returns the result as a Blob.
+ * Use this when you need the image data without triggering a download
+ * (upload to server, put in <img> src, test in Node, etc.)
+ *
+ * @param {object} opts
+ * @param {SVGSVGElement} opts.svgEl
+ * @param {string}  opts.templateSrc
+ * @param {{ x: number, y: number, size: number }} [opts.qr]
+ * @param {string}  [opts.mime='image/jpeg']
+ * @param {number}  [opts.quality=0.92]
+ * @param {number}  [opts.scale=1]
+ * @param {boolean} [opts.debug=false]
+ * @returns {Promise<Blob>}
+ */
+export async function buildQrCompositeBlob({
+  svgEl,
+  templateSrc,
+  qr      = { x: 50, y: 50, size: 260 },
+  mime    = 'image/jpeg',
+  quality = 0.92,
+  scale   = 1,
+  debug   = false,
+  signal,
+}) {
+  if (!svgEl)       throw new Error('buildQrCompositeBlob: svgEl is required');
+  if (!templateSrc) throw new Error('buildQrCompositeBlob: templateSrc is required');
+  signal?.throwIfAborted?.();
+
+  const bg  = await loadImage(templateSrc, { signal });
+  const cw  = Math.round(bg.width  * scale);
+  const ch  = Math.round(bg.height * scale);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = cw; canvas.height = ch;
+  const ctx = canvas.getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(bg, 0, 0, cw, ch);
+
+  const qrPng = await svgToPngDataURL(svgEl, Math.max(2, Math.ceil(scale * 3)));
+  const qrImg = await dataURLToImage(qrPng);
+  const qx = Math.round(qr.x * scale);
+  const qy = Math.round(qr.y * scale);
+  const qs = Math.round(qr.size * scale);
+  ctx.drawImage(qrImg, qx, qy, qs, qs);
+
+  if (debug) {
+    ctx.strokeStyle = 'rgba(0,0,0,0.6)';
+    ctx.lineWidth   = Math.max(1, scale);
+    ctx.strokeRect(qx + 0.5, qy + 0.5, qs - 1, qs - 1);
+  }
+
+  return new Promise((res, rej) =>
+    canvas.toBlob(b => b ? res(b) : rej(new Error('canvas.toBlob failed')), mime, quality),
+  );
+}
+
+// ─── Download wrappers ────────────────────────────────────────────────────────
+
+/**
+ * Composites a QR code SVG onto a background image and triggers a file download.
+ *
+ * Coordinate system: (0, 0) is the TOP-LEFT corner of the background image.
+ * Units are pixels of the background image at scale=1.
+ *
+ * @param {object} opts
+ * @param {SVGSVGElement} opts.svgEl       - QR SVG element (ref from QRCodeGenerator).
+ * @param {string}  opts.templateSrc       - URL or imported asset path (JPEG or PNG).
+ * @param {{ x: number, y: number, size: number }} [opts.qr]
+ * @param {string}  [opts.fileName='poster.jpg']
+ * @param {string}  [opts.mime='image/jpeg']
+ * @param {number}  [opts.quality=0.92]
+ * @param {number}  [opts.scale=1]
+ * @param {boolean} [opts.debug=false]     - Draw a border around the QR area.
+ */
+export async function downloadQrComposite({
+  svgEl, templateSrc,
+  qr       = { x: 50, y: 50, size: 260 },
+  fileName = 'poster.jpg',
+  mime     = 'image/jpeg',
+  quality  = 0.92,
+  scale    = 1,
+  debug    = false,
+}) {
+  const blob = await buildQrCompositeBlob({ svgEl, templateSrc, qr, mime, quality, scale, debug });
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement('a');
+  a.href = url; a.download = fileName;
+  document.body.appendChild(a); a.click(); a.remove();
+  URL.revokeObjectURL(url);
+}
+
+/** @deprecated Use `downloadQrComposite` instead. */
+export const downloadLeafletImage = downloadQrComposite;

package/utils/raster.js

@@ -0,0 +1,140 @@
+// utils/raster.js
+// Browser-side raster helpers: SVG → PNG, PNG → JPEG, image loading.
+// No external dependencies.
+
+/**
+ * Serialises an SVG element to a PNG data URL at the given pixel scale.
+ * @param {SVGSVGElement} svgEl
+ * @param {number} [scale=2]
+ * @returns {Promise<string>} PNG data URL
+ */
+export async function svgToPngDataURL(svgEl, scale = 2) {
+  const serializer = new XMLSerializer();
+  let svg = serializer.serializeToString(svgEl);
+
+  // Ensure xmlns attribute is present (required for img.src rendering)
+  if (!svg.match(/^<svg[^>]+xmlns=/)) {
+    svg = svg.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+
+  const vbox = svgEl.viewBox?.baseVal;
+  const w = Math.floor((vbox?.width  || svgEl.width.baseVal.value)  * scale);
+  const h = Math.floor((vbox?.height || svgEl.height.baseVal.value) * scale);
+
+  const img = new Image();
+  const dataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  await new Promise((res, rej) => { img.onload = res; img.onerror = rej; img.src = dataUrl; });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+
+  const ctx = canvas.getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, 0, 0, w, h);
+
+  return canvas.toDataURL('image/png');
+}
+
+/**
+ * Converts a base64 data URL to a Uint8Array of raw bytes.
+ * @param {string} dataUrl
+ * @returns {Uint8Array}
+ */
+export function dataURLToBytes(dataUrl) {
+  const b64 = dataUrl.split(',')[1];
+  const bin = atob(b64);
+  const u8 = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);
+  return u8;
+}
+
+/**
+ * Re-encodes a PNG data URL as JPEG bytes.
+ * @param {string} pngDataURL
+ * @param {number} [quality=0.92]
+ * @returns {Promise<Uint8Array>}
+ */
+export async function pngDataURLtoJpegBytes(pngDataURL, quality = 0.92) {
+  const img = new Image();
+  await new Promise((res, rej) => { img.onload = res; img.onerror = rej; img.src = pngDataURL; });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  canvas.getContext('2d').drawImage(img, 0, 0);
+
+  const jpg = canvas.toDataURL('image/jpeg', quality);
+  return dataURLToBytes(jpg);
+}
+
+/**
+ * Loads an image via a URL with crossOrigin="anonymous".
+ * @param {string} src
+ * @returns {Promise<HTMLImageElement>}
+ */
+export function loadImage(src, { signal } = {}) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) { reject(signal.reason ?? new DOMException('Aborted', 'AbortError')); return; }
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload  = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+    if (signal) {
+      signal.addEventListener('abort', () => {
+        img.src = '';
+        reject(signal.reason ?? new DOMException('Aborted', 'AbortError'));
+      }, { once: true });
+    }
+    img.src = src;
+  });
+}
+
+/**
+ * Loads an image from a URL and returns it as JPEG bytes.
+ * @param {string} src
+ * @param {number} [quality=0.9]
+ * @returns {Promise<Uint8Array>}
+ */
+export async function imageURLtoJpegBytes(src, quality = 0.9) {
+  const img = await loadImage(src);
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  canvas.getContext('2d').drawImage(img, 0, 0);
+  const jpg = canvas.toDataURL('image/jpeg', quality);
+  return dataURLToBytes(jpg);
+}
+
+/**
+ * Resolves a data URL string into an HTMLImageElement.
+ * @param {string} dataUrl
+ * @returns {Promise<HTMLImageElement>}
+ */
+export function dataURLToImage(dataUrl) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}
+
+/**
+ * Downloads the QR SVG element as a PNG file.
+ * @param {SVGSVGElement} svgEl
+ * @param {object} [opts]
+ * @param {number} [opts.scale=3]
+ * @param {string} [opts.fileName='qr.png']
+ * @returns {Promise<void>}
+ */
+export async function downloadQrPng(svgEl, { scale = 3, fileName = 'qr.png' } = {}) {
+  if (!svgEl) throw new Error('downloadQrPng: svgEl is required');
+  const dataUrl = await svgToPngDataURL(svgEl, scale);
+  const a = document.createElement('a');
+  a.href     = dataUrl;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}

package/utils/url.js

@@ -0,0 +1,20 @@
+// utils/url.js
+// URL sanitisation utilities for QR codes.
+// Strips tracking parameters (UTM, gclid, fbclid, …) and optionally the protocol
+// to reduce QR byte usage. No external dependencies.
+
+export function sanitizeUrlForQR(input, { whitelist = [], aggressive = true, preserveProtocol = true } = {}){
+  try{
+    const u = new URL(input);
+    const TRACKING = new Set(['utm_source','utm_medium','utm_campaign','utm_term','utm_content','utm_id','gclid','gbraid','wbraid','fbclid','yclid','msclkid','mc_cid','mc_eid','_hsenc','_hsmi','ref','ref_src']);
+    const keep = new Set(whitelist);
+    const next = new URLSearchParams();
+    const entries = Array.from(u.searchParams.entries());
+    if(aggressive){ for(const [k,v] of entries) if(keep.has(k)) next.append(k,v); }
+    else { for(const [k,v] of entries) if(!TRACKING.has(k) || keep.has(k)) next.append(k,v); }
+    u.search = next.toString()? `?${next}` : '';
+    if(!preserveProtocol && (u.protocol==='https:'||u.protocol==='http:')) return `${u.host}${u.pathname}${u.search}${u.hash}`;
+    return u.toString();
+  }catch{ return String(input||'').trim(); }
+}
+export function utf8ByteLen(s){ return new TextEncoder().encode(String(s)).length; }

package/worker/qr.worker.js

@@ -0,0 +1,45 @@
+// worker/qr.worker.js
+// Web Worker entry point for makeQr.
+//
+// Why a Worker?
+//   makeQr is synchronous and CPU-bound. For v10-12 QR codes on low-end mobile
+//   it can take 5-15 ms, which blocks the main thread and causes frame jank during
+//   real-time input. Running it in a Worker keeps the UI smooth.
+//
+//   The flat Uint8Array output (model.modules, model.functionMask) is Transferable —
+//   it can be moved to the main thread with zero copying via postMessage transfer.
+//
+// Usage from main thread:
+//
+//   const worker = new Worker(new URL('./worker/qr.worker.js', import.meta.url), { type: 'module' });
+//
+//   worker.postMessage({ id: 1, value: 'https://example.com', eccLevel: 'L', maxVersion: 6 });
+//
+//   worker.onmessage = ({ data }) => {
+//     if (data.error) { console.error(data.error); return; }
+//     // data.model is the full QRModel, modules and functionMask are Uint8Arrays
+//     renderQrToCanvas(data.model, canvas);
+//   };
+//
+// Message protocol:
+//
+//   → { id, value, eccLevel?, maxVersion? }
+//   ← { id, model: { version, size, modules: Uint8Array, functionMask: Uint8Array, eccLevel } }
+//   ← { id, error: string }
+
+import { makeQr } from '../qr/qr-core.js';
+
+self.onmessage = ({ data }) => {
+  const { id, value, eccLevel = 'M', maxVersion = 6 } = data;
+  try {
+    const model = makeQr(value, { eccLevel, maxVersion });
+
+    // Transfer the Uint8Arrays to avoid copying (~size² bytes each)
+    self.postMessage(
+      { id, model },
+      [model.modules.buffer, model.functionMask.buffer],
+    );
+  } catch (e) {
+    self.postMessage({ id, error: String(e) });
+  }
+};