Note: All data is processed locally in your browser and will not be uploaded to any server.
Tool is loading, please wait a moment...

Tool Introduction

QR Code Decoder is a powerful online tool that can quickly parse and recognize QR code content. It supports multiple input methods, including direct paste, upload local file, input image URL, Data URL and SVG code. The tool displays complete decoded data and detailed technical information to help you fully understand the content and structure of QR codes.

How to Use

  1. Select input method: paste image, upload file, image URL, Data URL or SVG
  2. Paste: Use Ctrl+V (Cmd+V on Mac) to directly paste image from clipboard
  3. Upload: Click or drag and drop image file to upload area
  4. URL: Enter the network address of the image and click 'Load from URL'
  5. Data URL/SVG: Directly paste Data URL or SVG code
  6. Click the 'Decode QR Code' button to view the decode result on the right
  7. Use the 'Copy' button to copy the decoded text content or raw data

Features

  • Supports multiple input methods: paste, upload, URL, Data URL, SVG
  • Supports common image formats: PNG, JPEG, WebP, GIF, SVG
  • Fast and accurate QR code recognition
  • Displays complete decoded data and raw binary data
  • Provides detailed technical information (version, error correction level, mask pattern)
  • Shows QR code position coordinates in the image
  • Real-time decoding with instant results
  • Completely processed locally in browser, protecting data privacy
  • Supports dark mode

FAQ

Q: Why can't my QR code be recognized?

A: Possible reasons include: 1) Image quality is too low or blurry; 2) QR code is obscured or severely damaged; 3) QR code in the image is too small; 4) Image contrast is insufficient. It's recommended to use clear, high-contrast images and ensure the QR code is fully visible.

Q: What image formats are supported?

A: The tool supports common image formats including PNG, JPEG, WebP, GIF and SVG. PNG format is recommended for best recognition results.

Q: Will my data be uploaded to the server?

A: No. All QR code decoding processing is done locally in your browser and will not be uploaded to any server, fully protecting your data privacy.

Q: What is Data URL?

A: Data URL is a way to directly encode image data in a URL, formatted as data:image/png;base64,... This method allows displaying images on web pages without needing separate image files.

Q: Can QR codes with logos be decoded?

A: Yes. The tool uses the jsQR library for decoding, which supports decoding QR codes with logos or certain levels of damage, provided the QR code uses sufficient error correction level (usually Q or H level).

Technical Challenges

Image Preprocessing

Before decoding QR codes, input images need to be preprocessed, including format conversion, size adjustment, and pixel data extraction. Different input sources (file, URL, Data URL, SVG) require different processing methods. SVG in particular needs to be rendered to Canvas first to extract pixel data.

Binarization Processing

A key step in QR code recognition is converting the image to a black and white binary image. The jsQR library uses an adaptive threshold algorithm that can handle images with different lighting conditions and contrast. However, in extreme cases (such as severely overexposed or underexposed images), recognition rate will decrease significantly.

Position Detection Pattern Recognition

QR codes have special position markers at three corners (Position Detection Patterns). The detection algorithm needs to accurately find these three markers in the image and determine the QR code's position, orientation, and size based on their location and size. This is the foundation of the entire recognition process.

Error Correction

jsQR uses the Reed-Solomon error correction algorithm to recover partially damaged or obscured data. Depending on the QR code's error correction level, it can recover 7%-30% of damaged data. This allows successful decoding even when the QR code is partially obscured (such as with an added logo).

Cross-Origin Image Handling

When loading images from network URLs, cross-origin issues need to be handled. If the image server doesn't set proper CORS headers, the Canvas will be tainted, preventing pixel data from being read. The solution is to use a proxy or require the image server to support CORS.

Related Concepts

jsQR

A pure JavaScript implementation of a QR code decoding library that can run in browsers without server-side processing. It identifies and decodes QR codes by analyzing image pixel data, supporting various error correction levels and encoding modes.

Canvas API

A graphics drawing API provided by HTML5 that can dynamically generate and manipulate images on web pages. In QR code decoding, Canvas is used to convert images in various formats into pixel data arrays for analysis by the jsQR library.

ImageData

An object in the Canvas API that represents pixel data, containing the image's width, height, and RGBA format pixel data array. jsQR requires data in this format to perform QR code recognition.

Binary Data

The raw byte data stored in a QR code, in its form before decoding. Depending on the encoding mode, this binary data is interpreted as different types of content such as numbers, text, byte strings, etc.

Mask Pattern

QR codes use mask patterns to distribute data modules, avoiding large areas of single color and improving recognition reliability. The QR specification defines 8 mask patterns, and the generator selects the optimal pattern.

Terminology

Decoding
The process of extracting and restoring original data from a QR code image. It includes multiple steps such as image recognition, positioning, data extraction, and error correction.
Location
The position coordinates of the QR code in the image, usually including the coordinates of four corner points. This information can be used to mark the QR code's position on the original image or perform perspective correction.
Version
The size specification of QR codes, from Version 1 (21×21 modules) to Version 40 (177×177 modules). The higher the version, the more data can be stored. The decode result will display the detected QR code version.
CORS (Cross-Origin Resource Sharing)
A mechanism that allows web pages to load resources from different domain names. When loading network images, if the image server doesn't support CORS, Canvas will be unable to read pixel data, causing decode failure.