qr · decode · canvas · local

Decode QR codes from images

Drop a screenshot or downloaded QR image and instantly read its content. Works with URLs, Wi-Fi, vCards, anything inside the QR. Runs entirely in your browser.

QR Code Reader
Image
—
drop one
Content
—
—
Engine
jsQR
canvas
Status
—
local
input · image

Works with screenshots and downloaded QR images. Photos taken in awkward angles or low light may fail — try cropping closer to the QR first.

output · decoded content

Decoded text will appear here…

Quick Start

How to decode a QR image

Drop an image file in. The page draws it onto a canvas, reads the raw pixel data, and runs jsQR locally to detect and decode the QR.

  1. 01

    Choose an image

    PNG, JPEG, GIF, WebP — any image format the browser can render.

    Bytes flow through TextEncoder/TextDecoder for predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.

    inputUTF-8TextEncoderlosslesslive
    input · raw bytesimage · UTF-8
    qr.png
    loaded · UTF-8MIME · ready
  2. 02

    Auto-decode

    The image is drawn to a hidden canvas; jsQR scans the pixels.

    Hash and signature operations call crypto.subtle from the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.

    canvasWeb Cryptosubtledeterministiclive
    engine · optionsjsQR · live
    getImageData → jsQR
    options applied · livelive
  3. 03

    Read the content

    URL, plain text, Wi-Fi, vCard — whatever the QR encoded.

    Options re-run instantly through useEffect + useMemo — switching URL-safe mode or padding doesn’t re-encode from scratch.

    decodememoisedoptionsinstantreactive
    out · encodedtext · ready
    https://example.com
    encoded · livelossless
  4. 04

    Copy and use

    One-click copy puts the text in your clipboard.

    Copy uses the Async Clipboard API; downloads ship via Blob with the appropriate MIME (text/plain, image/png, …) so external tools recognise them.

    exportclipboardblobMIME-correctclient-side
    ok · copiedready · done
    Copied
    shipped · ready to shipsuccess
Pro tips

Encoding without surprises

Always UTF-8 first

Use TextEncoder / TextDecoder for bytes ↔ string conversion. btoa alone breaks on non-ASCII.

URL-safe vs standard Base64

Standard uses +, /, =; URL-safe swaps to -, _, no padding. Don’t mix them.

Hashes aren’t passwords

SHA-256 is fast; that’s good for fingerprints, bad for passwords. Use bcrypt / argon2 for credentials.

Watch padding rules

Some decoders are strict about = padding, others auto-pad. If round-trips fail at exactly 1 or 2 bytes, check padding.

Use Web Crypto for keys

Generate cryptographic keys via crypto.subtle, never Math.random. The latter is predictable.

JWT decode ≠ verify

Decoding a JWT just splits and base64-decodes. Verification needs the issuer’s public key / shared secret.

Use Cases

When to decode QR codes

Screenshots, archives, printed materials.

Screenshot inspection

Decode a QR sent in chat without scanning with a phone. Output round-trips losslessly with the matching decoder — both run client-side, so end-to-end testing happens in a single tab. Encoding flows through TextEncoder for predictable UTF-8 semantics.

RFC-compliant

Wi-Fi recovery

Pull the password back out of a printed Wi-Fi QR. Web Crypto's subtle.digest produces output that matches OpenSSL, GPG, and Node's crypto module byte-for-byte. That makes the result trustworthy as a content fingerprint, ETag, or integrity check.

OpenSSL-matched

vCard import

Extract contact details from a business-card QR. Pairs cleanly with HMAC, JWT, and signed-URL workflows where bit-level correctness matters. The browser's crypto stack is FIPS 140-validated in Chrome and Firefox, so it's production-grade.

lossless

URL verification

Confirm a QR points where it claims before scanning on phone. Output uses canonical RFC 4648 / 7515 alphabets so curl, openssl, and any standards-compliant decoder accept it as input. URL-safe variants drop padding for tokens that travel in query strings.

byte-identical

Archive metadata

Inspect QR-encoded provenance stickers on old assets. Heavy hashing runs through useMemo so large inputs don't block typing. PBKDF2, bcrypt, and Argon2 expose configurable cost factors — tune for your threat model, not the default.

spec-grade

Marketing QA

Verify every poster's QR encodes the correct campaign URL. Same input plus same options always yields identical bytes. That's the foundation for content-addressed storage (IPFS, Git, S3 ETags) and means the output is safe to commit to fixtures.

production-ready
FAQ

Frequently asked questions

Any image the browser can render — PNG, JPEG, GIF, WebP, SVG.
Low contrast, blur, glare, or extreme angles can defeat jsQR. Try cropping closer to the QR and increasing contrast.
Not in this tool — jsQR returns the first detected QR. Process images one at a time.
All standard QR types (model 1 / 2) up to version 40. Micro QR is not supported.
No. The image is processed by jsQR in your browser — it runs locally and never leaves the device.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!