Create QR codes and read them from images in the browser
Generate QR codes and scan images on the same page without sending input to a server.
Read a QR code imageConclusion: Read the original image directly, verify the result as a raw string, then use it
You can select, Drop, or paste PNG, JPEG, WebP, GIF, or BMP from the Clipboard and analyze QR codes. Images are processed on the device.
The current tool does not read camera streams directly. To use a camera, save an image using the device camera and then load it.
Verify separately that it was generated, can be read from the image, and can be used safely.
Check image decoding and QR decoding step by step
The browser expands the image into pixels, tries BarcodeDetector, and if necessary passes ImageData to the bundled jsQR. It composites transparent backgrounds over white and also tries black-and-white inversion.
HEIC is not directly supported. If iPhone photos in HEIC cannot be read, convert them to PNG or JPEG with an image conversion tool, then try again.
| Account to check | How to check | judgment |
|---|---|---|
| File | Supported extensions and MIME types | PNG/JPEG/WebP/GIF/BMP |
| Image | Entire QR code and margins | Not clipped |
| Result | Raw Text | Original Data match |
| URL | Domain and scheme | Does not open automatically |
How to verify with the QR code generation and reading tool
- Select a QR code image, Drop it, or paste it from the Clipboard.
- Run automatic analysis or “Read QR code.”
- Check the read result as a Raw string and Copy it if needed.
- For a URL, check the Domain, Path, and Query with the URL analysis tool.
The scanned string is not executed as HTML, and URLs are not opened automatically by design.
Order for checking image reading
| Symptom | Initial check | Next steps |
|---|---|---|
| Cannot select an image | Format | Convert to PNG/JPEG |
| No detection | Spacing and size | Try again with the original image |
| Characters differ | Raw string | Original data and encoding check |
| The URL looks suspicious | Domain and query | URL analysis |
Consider Version, cells, margins, and error correction separately
| s | meaning | Practical verification |
|---|---|---|
| Version | 1–40. Version 1 is 21×21 cells, and Version 40 is 177×177 cells. | The required version varies with data volume, character types, and error correction |
| Cell | The smallest black-and-white unit that makes up a QR code | Whether each cell remains uniformly distinguishable after rasterization or printing |
| Quiet Zone | The area around a QR code where nothing is placed | Ensure a width of at least four cells on all sides |
| Error correction | L, M, Q, and H levels for restoring data from damage or loss | Increasing it is not universally better; it is a trade-off with data volume and density |
Do not assume QR code maximum capacity is a single number. Capacity varies by Version, data type such as numeric, alphanumeric, Byte, and Kanji, and error correction level. Fitting more data into the same physical size makes cells finer and reading conditions stricter.
Read test to perform before publishing or distributing
- Return the generated PNG or SVG to the current tool's image reader and confirm that it matches the original data
- Check not only with the same library, but also with the actual smartphones and readers that will be used.
- Check Web displays, Screenshots, and printed materials at the intended size and viewing distance
- Check the quiet zone on all sides, contrast with the background, blur, cell distortion, and overlap with logos or text
- When including Japanese text, emoji, URL %, +, &, line breaks, or trailing spaces, compare raw results.
Being readable with the same tool is a useful self-test, but it does not guarantee readability on all devices, cameras, and print conditions. If the usage environment is known, include regression testing in that environment as a completion criterion.
Check scan success and URL safety separately.
The Reader's role ends at decoding a string from a QR code image. Even if it begins with https://, that does not mean it is a legitimate site, reachable, safe, or not phishing. Watch for shortened URLs, lookalike Domains, unintended Queries, and Schemes such as javascript: and data:.
- Check scan results as raw strings without automatically trimming or normalizing them.
- Do not open URLs automatically; after checking the Domain, Path, and Query, the user takes an explicit action
- Treat Wi-Fi Passwords, credentials, and personal information as readable plain text
- Do not send QR contents to Analytics, Logs, or external APIs.
Supported scope of the current QR code creation and reading tool
| Item | Support in the current Tool |
|---|---|
| Generated content | Text, URL, Wi-Fi, email, phone number, and SMS |
| Generation settings | Error correction L, M, Q, and H; 128–2048 px; 4–16-cell margins; foreground and background colors |
| Generated result | Automatically selected version, cell count, UTF-8 byte count, PNG/SVG save, and PNG image copy |
| Image reading | Select, drop, or paste PNG, JPEG, WebP, GIF, or BMP from the Clipboard. |
| Scan result | Display and copy the decoded raw string. Do not automatically open links. |
| Unsupported | Direct camera reading, Camera selection, Logo compositing, Version pinning, direct HEIC reading, URL safety assessment |
Generation, image analysis, copying, and downloading are processed in the browser, and input strings and images are not sent to DevelopTools servers. A detected URL is not guaranteed to be safe, so check the string before separately performing URL analysis or similar actions.
Check primary information and browser specifications
- DENSO WAVE: QR Code data capacity and versions
- DENSO WAVE: Error correction capability
- DENSO WAVE: Key points for determining code area
- MDN：MediaDevices.getUserMedia()
- Official jsQR repository
For QR code Version, Quiet Zone, and error correction, prioritize primary sources such as DENSO WAVE; for Camera Permission and Secure Context, prioritize Web specifications and MDN; for Library APIs, prioritize official Documentation for the Version in use. Do not confuse article examples with the current tool implementation.
Example: Read an email attachment screenshot on a PC
Save a Screenshot that retains the full QR code and surrounding margin, then Drop it into image reading.
You can choose the necessary action after checking the string without opening the URL automatically.
- Save original image
- Drop
- Check Raw results
- URL structure check
Cell boundaries may blur in social media images that recompress Screenshots. Use the original image when possible.
Frequently asked questions
- Does a QR code need margins?
- Yes. Reserve a 4-cell-wide Quiet Zone on all four sides of a QR code. Bringing text, borders, images, or background patterns close to it may affect readability.
- Does setting error correction level to H make it the easiest to read?
- Not necessarily. Recovery capability increases, but error-correction data also increases, which may make cells finer at the same size. Choose based on use, dirt, data volume, and size.
- Is a scanned URL safe?
- Successful reading does not determine safety. Check the Domain, Path, Query, and Scheme, and if needed, break it down with a URL analysis tool before opening it.