[Bug][P1] Fix QR/image download actions and add real browser download regression coverage

[baixiangcpp]

User signal

A product walkthrough reported that generated images cannot be downloaded, with QR Code Generator called out as an example.

Original feedback: 生成的图片无法下载 比如二维码.

Current implementation to inspect

QR Code Generator renders to a canvas and stores canvas.toDataURL("image/png") in component state. The PNG action calls downloadDataUrl(dataUrl, "qr-code.png"). SVG uses buildQrSvg(...) and downloadSvg(...).

The browser helpers currently create a detached <a>, set href and download, then call a.click(). For SVG, the object URL is revoked immediately after click().

Relevant files:

• src/features/tools/qr-code-generator/page.tsx
• src/features/tools/qr-code-generator/browser-actions.ts

Suspected cause

Some browsers are stricter about programmatic downloads:

• a detached anchor click can be ignored;
• object URLs may be revoked too early before the download is consumed;
• canvas.toDataURL can be less reliable than canvas.toBlob for large images or browser-specific download handling;
• the UI currently shows success after calling the helper, even if the browser blocked or ignored the download.

Recommended implementation

• Replace detached-anchor helpers with a robust downloadBlob / downloadUrl helper:
  • append the anchor to document.body;
  • set rel="noopener" where appropriate;
  • call click() inside the user-triggered action;
  • remove the anchor in finally;
  • defer URL.revokeObjectURL(url) with setTimeout or after download initiation.
• Prefer canvas.toBlob for PNG export; fall back to data URL only when needed.
• Return an explicit result from the download helper so the action does not announce false success.
• Add browser-level Playwright coverage using page.waitForEvent("download") for QR PNG and SVG.
• Audit other generated-image/download tools for the same pattern.

Reproduction matrix

• /en/qr-code-generator
• generate default QR;
• download PNG;
• download SVG;
• repeat after changing size/color;
• repeat with logo enabled;
• test Chrome, Edge, Safari where possible.

Acceptance criteria

• QR PNG download produces a non-empty .png file in Chromium/Chrome.
• QR SVG download produces a non-empty .svg file in Chromium/Chrome.
• The success toast is only shown after a download helper returns success.
• Object URLs are not revoked synchronously before the browser can consume them.
• Add focused unit tests for helper behavior and Playwright download smoke for QR export.

[baixiangcpp]

Agent-side expanded audit note: this is directly automatable. Add a Playwright download test for QR PNG/SVG using page.waitForEvent('download') and assert non-empty downloaded files. Also add a static audit for browser download helpers that call a.click() on a detached anchor or call URL.revokeObjectURL() synchronously after click. QR Code Generator currently uses a canvas data URL for PNG and a Blob/object URL for SVG; the helper should append the anchor to document.body, remove it in finally, and delay object URL revocation. The action should not show success unless the helper reports that download initiation completed.

[baixiangcpp]

Visual browser audit update - 2026-07-01

Confirmed on the public site with desktop Chromium.

Reproduction:

1. Open /en/qr-code-generator.
2. Keep the default QR content or click Sample.
3. Click PNG.
4. The page shows a success toast: QR code saved as PNG.
5. Open chrome://downloads.
6. The Downloads page still says downloaded files will appear there; no QR PNG appears.
7. Repeat with SVG. The page shows a success toast, but no SVG appears in Downloads.

This makes the current UX worse than a silent failure because it reports success when the browser did not register a download.

PR #326 addresses the QR code path by switching to a safer helper, Blob/object URL handling, delayed object URL revocation, and explicit action results. Still recommended before closing:

• add or keep a Playwright page.waitForEvent("download") test for PNG and SVG;
• verify the fix against the deployed preview or production build, not only unit tests;
• audit other image/export tools for the same detached-anchor or immediate-revoke pattern.

[baixiangcpp]

Resolved in merged PR #335 by commit 1e51b60: real browser QR PNG/SVG download coverage. The final PR CI build (Node 20) and Cloudflare Pages checks passed.