QR Code Reader
Scan and decode QR codes from images.
QR Code Reader scans and decodes QR codes from images entirely in the browser — "Upload an image to scan and decode QR codes." There is no separate scan button: drop or pick a file and decoding starts immediately, showing "Scanning for QR codes..." with a spinner while jsQR walks the canvas pixel data. Success surfaces the payload in a monospace "Decoded Text" block with a "Copy Text" button that flips to "Copied!" for two seconds.
Failure toasts "No QR code found in image" so you know to retry with a sharper crop. The decoder is jsQR, a pure-JS library bundled from npm — decode runs locally with no network calls and no AI. "Scan Another" resets the card (clearAll) for the next image; only the first file of a multi-drop is used (files[0]).
How it works
lib/imageQrReader.ts loads the file to a canvas, grabs ImageData, and calls jsQR(imageData.data, width, height). When the decode returns null it throws "No QR code found in image", which the page surfaces as a toast. Decode is triggered automatically from handleFiles → decodeQR on file select — there is no manual Scan step.
State lives in Redux qrReaderSlice (item, decodedData, isProcessing). The "Copy Text" button uses navigator.clipboard.writeText on the decoded string (decoded.data) and requires a secure context. jsQR is bundled from the jsqr npm package — third-party, but fully local: no network, no AI.
How to use
- Drop an image containing a QR code (accept image/*; single file — label "Click or drag and drop to add files").
- Watch "Scanning for QR codes..." with spinner while jsQR runs automatically.
- On success, read the payload in the "Decoded Text" monospace block.
- Click "Copy Text" — the button flips to "Copied!" for 2 seconds and a toast confirms "Copied to clipboard!".
- On failure, the toast reads "No QR code found in image" — clear and retry with a sharper crop.
- Click "Scan Another" to reset via clearAll and scan the next image.
Tips
- Decode is automatic on upload — there is no separate Scan button to press.
- Works on photos and screenshots as long as the QR is unwarped and high-contrast; crop first with image-crop if needed.
- Only the first file of a multi-file drop is used (files[0]).
- Clipboard copy uses navigator.clipboard.writeText and requires a secure context (HTTPS or localhost).
QR Code Reader FAQ
Does decoding need the internet?
No — jsQR runs locally on canvas pixel data; the tool makes no network requests.
Why did I see "No QR code found in image"?
jsQR could not locate a readable code — try a clearer, larger, less distorted QR (crop first if the code is small in frame).
Can I batch-scan multiple images?
No — it's a single-file dropzone; use "Scan Another" between images.
What gets copied to the clipboard?
The full decoded string (decoded.data) from the QR code.
Can it generate QR codes?
No — this tool only reads; use qr-generator (Utilities) to create them.
Credits
- jsQR — Pure-JS QR decoder used in lib/imageQrReader.ts