Resize qr code

[J2TeamNNL]

Add QR code size editing functionality to allow users to customize the output size.

---

 

---

Note

Adds numeric QR size control (100–1000px) with responsive caps, switches validation to blur/Enter, and fixes PNG/PDF exports to include logo/text.

• UI/Features:
  • Add numeric QR size input in index.html (#qrSize, 100–1000px) with hints and Enter-to-apply.
  • Pass dynamic size to QRGenerator.generate(); default 300.
• Validation/UX:
  • Shift field handlers from input to blur (and Enter) in js/app.js; update docs in VALIDATION.md.
• Export Fixes:
  • Change download logic in js/qr-generator.js to use img.src for PNG/PDF so logo/text persist; adjust SVG path.
• Styling/Responsive:
  • Update css/style.css QR caps (desktop 500px, mobile 350px, xs 280px).
• i18n:
  • Add qr_size, qr_size_input, qr_size_hint in js/translations.js and support data-i18n-placeholder in js/utils.js; remove hardcoded placeholder in index.html.
• Docs/Changelog:
  • Update README.md, CHANGELOG.md, and VALIDATION.md to reflect size control, smart validation, and export behavior.

^{Written by Cursor Bugbot for commit 6cb70c0. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

Bug: Logo Cropping Breaks with QR-Scaled Resize

Logo is always cropped to fixed 200px size regardless of QR code size. When QR size is set to 1000px, the 200px logo gets upscaled to 20% (200px) causing pixelation. When QR size is 100px, the logo gets downscaled from 200px to 20px (20% of 100px) wasting resolution. The cropAndResizeImage targetSize should scale proportionally with the QR code size (e.g., canvas.width * 0.20 or a similar percentage).

js/qr-generator.js#L152-L153

qr-code-generator/js/qr-generator.js

Lines 152 to 153 in 6cb70c0

	// Auto-crop and resize logo
	this.cropAndResizeImage(logoFile, 200).then((croppedBlob) => {

 

---

Bug: Dynamic font scaling for QR canvas text

Font size is hardcoded to 16px regardless of QR code size. When QR size is 1000px, the 16px font will appear tiny. When QR size is 100px, the 16px font will appear too large and may exceed the QR boundaries. The font size should scale with canvas.width (e.g., Math.max(12, canvas.width * 0.05) to maintain proportionality).

js/qr-generator.js#L202-L203

qr-code-generator/js/qr-generator.js

Lines 202 to 203 in 6cb70c0

	ctx.fillStyle = textColor || '#000000';
	ctx.font = 'bold 16px Arial'; // Reduced from 18px

 

---

Bug: Dynamic QR padding scaling issue

Padding is hardcoded to 10 pixels for both logo and text customizations. This doesn't scale with the dynamic QR code size. For a 1000px QR code, 10px padding is too small, while for a 100px QR code, 10px padding is too large. The padding should scale proportionally with the QR size (e.g., Math.max(5, canvas.width * 0.03)).

js/qr-generator.js#L159-L160

qr-code-generator/js/qr-generator.js

Lines 159 to 160 in 6cb70c0

	const y = (canvas.height - logoSize) / 2;
	const padding = 10; // Increased padding for better readability

 

---