QR Code Generator & Scanner
Generate QR codes with custom colours and error correction, or scan QR codes from images and live camera — all client-side in your browser.
QR Code Generator & Scanner
Generate custom QR codes or scan them from images and your camera — entirely in-browser.
How to use the QR Code Generator and Scanner
You are designing a flyer for a weekend market stall and need a QR code that links to your online store. Type the URL into the text area, pick your brand colours using the dot and background colour pickers, set the error correction to High so the code stays scannable even if a sticker is partially peeled, and click Download PNG. The 300px code downloads in under a second, ready to drop into your design tool.
On the scanner side, a restaurant owner receiving a QR-based payment confirmation can click Start Camera, point the rear camera at the code, and see the decoded URL appear instantly — or drag a screenshot of the code into the drop zone. The scanner handles codes at angles up to roughly 30 degrees, with moderate blur, and at sizes as small as 2cm on screen.
Real-World Applications and Use Cases
A marketing designer preparing flyers, posters, or business cards can instantly generate QR codes linking to campaign landing pages, promotional URLs, or Wi-Fi credentials. The tool allows custom brand colours and adjustable error correction so the code remains scannable even when printed at small sizes or partially obscured by design elements.
Software engineers building two-factor authentication, QR-based login, or ticketing systems need to quickly generate and scan test QR codes during development. This tool eliminates the need for external services or API keys, enabling rapid iteration entirely offline.
Teachers and lecturers can use this tool to visually demonstrate how QR error correction levels affect code density, how data capacity scales with version size, and how the Reed-Solomon algorithm enables partial damage recovery — all without requiring students to install software or create accounts.
How QR code encoding and decoding works
A QR (Quick Response) code is a two-dimensional matrix barcode defined by the ISO/IEC 18004 standard. It encodes data using a grid of black and white modules arranged in a square pattern, with specific finder patterns, timing patterns, and alignment patterns that allow scanners to locate and orient the code regardless of rotation or angle. The encoding process involves several discrete stages, each of which this tool executes entirely within the browser.
Generator pipeline: text to rendered matrix
When you enter text or a URL, the qrcode library first analyzes the input to determine the optimal QR version (1 through 40, where higher versions hold more data) and the most efficient data encoding mode — numeric, alphanumeric, byte, or kanji. The input is then encoded into a binary data stream and protected with Reed-Solomon error correction, which appends calculated redundancy symbols. The error correction level you select directly controls how many symbols are added: L (7% recovery), M (15%), Q (25%), or H (30%).
The resulting data stream is placed into the matrix according to a fixed placement pattern: data modules fill the matrix in a zigzag pattern from the bottom-right corner, while function patterns (finder, separator, timing, format information, and version information) occupy predetermined positions. Once the matrix is populated, a mask pattern is applied to均衡 the distribution of dark and light modules, improving scannability. The final matrix is then rendered to an HTML5 Canvas at your specified dimensions, using your chosen dot and background colours.
Scanner pipeline: image to decoded string
Image upload: When you drop or select an image file, the tool draws it onto an offscreen Canvas element, extracting the raw RGBA pixel data via getImageData(). The jsQR library then analyzes this pixel array to locate the three finder patterns (the large squares in the corners), determine the code boundaries, sample the module grid, and apply the reverse mask to recover the original data stream. Reed-Solomon decoding corrects any minor damage or noise in the image, and the decoded text or URL is returned as a UTF-8 string.
Camera scanning: Clicking "Start Camera" invokes navigator.mediaDevices.getUserMedia() with a preference for the rear-facing camera (facingMode: 'environment'). A requestAnimationFrame loop continuously reads video frames from the live stream, draws each frame to the offscreen Canvas, and passes the pixel data to jsQR. When a valid QR code is detected in any frame, the loop pauses, the camera stream is stopped, and the decoded result is displayed. This frame-by-frame approach ensures responsive scanning without blocking the main thread.
Edge cases and technical constraints
The generator gracefully handles empty input (displaying a blank canvas), maximum-length data strings (up to the QR standard's capacity for the selected version and error level), and extremely small or large output sizes (clamped between 100px and 1000px). Floating-point colour values are handled as hex strings conforming to the CSS colour specification. The scanner tolerates moderate image distortion, partial occlusion (up to the selected error correction threshold), and non-square aspect ratios, though extremely skewed or low-resolution images may fail to decode.
All computation uses IEEE 754 double-precision arithmetic via standard JavaScript number types. No external servers, CDN APIs, or third-party analytics services are contacted at any point during generation or scanning.
Frequently Asked Questions
Does the QR scanner need camera permission?
Yes. When you click "Start Camera", the browser prompts for camera access via the getUserMedia API. If permission is denied, a clear error message is displayed and you can continue scanning by uploading image files instead. No camera data is transmitted off-device — all frame processing occurs locally in the browser.
Is any data sent to a server?
No. QR generation uses the qrcode library and scanning uses jsQR — both run entirely in your browser. No images, text, or metadata ever leave your device. There are no server-side API calls, no analytics trackers, and no cookies involved in any part of the process. Your data remains completely private.
What do error correction levels mean?
Error correction adds redundancy to the QR code using the Reed-Solomon algorithm, enabling the code to be read even if partially obscured or damaged. Low (7%) uses fewer modules and creates a less dense pattern, while High (30%) allocates more space to error correction data, producing a denser grid that can survive significant damage. Choose higher levels when the QR code will be printed small or placed in environments where it may be partially covered.
Why does my scanned QR code show garbled text?
Garbled output typically occurs when the QR code contains binary data (such as encoded images or non-UTF-8 byte sequences) that the text decoder interprets literally. It can also happen if the source image is heavily compressed, low-resolution, or has significant motion blur. Try re-uploading a higher-resolution version of the image, or ensure the QR code was generated with text/URL encoding rather than a binary format. The scanner works best with standard alphanumeric, URL, and plain-text QR codes.
What is the maximum amount of text I can encode in a QR code?
The maximum data capacity depends on the QR version (1 through 40), the encoding mode, and the error correction level. At the highest capacity (Version 40, byte mode, error correction L), a QR code can hold up to 2,953 bytes of data. For typical URLs (50-200 characters), any version will suffice. The tool automatically selects the smallest version that fits your data, but very long text strings will produce denser codes that require more scanning precision and may need higher error correction to remain reliable.
Disclaimer: This tool is provided for educational and practical purposes only. It does not constitute professional advice regarding data security, encryption, or authentication systems. QR codes are not encrypted by default — any data encoded in a QR code is readable by anyone with a scanner. For sensitive information, ensure you use appropriate encryption or access-control mechanisms before encoding data into a QR code.