QR code detection, extraction, decoding and parsing written as pure JS port of the ZXing library.
The jsqr npm package is a JavaScript library for detecting and decoding QR codes from images. It is designed to be lightweight and efficient, making it suitable for use in web applications where QR code scanning functionality is needed.
Detect and Decode QR Code from Image Data
This feature allows you to detect and decode a QR code from image data. The `jsQR` function takes the image data, width, and height as input and returns the decoded QR code data if a QR code is found.
const jsQR = require('jsqr');
const imageData = getImageDataFromCanvas(); // Assume this function gets image data from a canvas element
const qrCode = jsQR(imageData.data, imageData.width, imageData.height);
if (qrCode) {
console.log('Found QR code', qrCode.data);
} else {
console.log('No QR code found');
}The qrcode-reader package is another JavaScript library for reading QR codes from images. It provides similar functionality to jsqr but also includes additional features like handling different image formats and supporting more complex QR code structures.
The qr-scanner package is a lightweight library for scanning QR codes using the browser's camera. It is designed for real-time QR code scanning and provides a simple API for integrating QR code scanning functionality into web applications. Compared to jsqr, qr-scanner is more focused on real-time scanning rather than decoding from static images.
A pure javascript port of the ZXing QR parsing library. This library takes in raw images and will locate, extract and parse any QR codes found within. It also exposes methods to do each step of the process individually. This allows piecemeal use and custom extension, for example you can use this library to parse pure QR codes (without extracting from an image), or to locate QR codes within an image without parsing them.
This library was written because there were no javascript QR code parsing libraries that were well maintained and capable of parsing any reasonably complex QR codes.
See how jsQR compares to other JS QR code decoders
ZXing is the best QR code library, and had been ported to many languages, but not to Javascript. jsQR is a fully featured port of the QR code portions of the zxing library, with the goal of growing into a maintainable and extendable QR parsing library in pure javascript.
npm install jsqr --save
jsQR = require("jsqr");
Include jsQR.js.
<script src="jsQR.js"></script>
You can also use module loaders such as requireJS or browserify
qrJS exports methods for each step in the QR recognition, extraction and decoding process, as well as a convenience wrapper method.
Using the wrapper method
var decoded = jsQR.decodeQRFromImage(data, width, height);
Using the individual methods
var binarizedImage = binarizeImage(data, width, height);
var location = locateQRInBinaryImage(binarizedImage);
if (!location) {
return;
}
var rawQR = extractQRFromBinaryImage(binarizedImage, location);
if (!rawQR) {
return;
}
console.log(decodeQR(rawQR));
Working example of parsing a webcam feed
decodeQRFromImage is a wrapper method for the different steps of the QR decoding process.
It takes in a RGBA image and returns a string representation of the data encoded within any detected QR codes.
data - An 1d array of numbers representing an RGBA image in the form r1, g1, b1, a1, r2, g2, b2, a2,.... This is the same form as the ImageData type returned by the .getImageData() call when reading data from a canvas element.width - The width of the image.height The height of the image.data.length should always be equal to width * height * 4.
Binarizing an image (converting it to an image where pixels are either back or white, not grey) is the first step of the process.
binarizeImage takes in a RGBA image and returns a BitMatrix representing the binarized form of that image.
data - An 1d array of numbers representing an RGBA image in the form r1, g1, b1, a1, r2, g2, b2, a2,.... This is the same form as the ImageData type returned by the .getImageData() call when reading data from a canvas element.width - The width of the image.height The height of the image.data.length should always be equal to width * height * 4.
locateQRInBinaryImage takes in a BitMatrix representing a binary image (as output by binarizeImage) and returns the location of a QR code if one is detected.
image - a BitMatrix representing a binary image (as output by binarizeImage)locateQRInBinaryImage returns null if no QR is found, else it returns an object with the following structure
{
bottomLeft: {
x: number,
y: number
},
topLeft: {
x: number,
y: number
},
topRight: {
x: number,
y: number
}
}
The coordinates represent the pixel locations of the QR's corner points.
extractQRFromBinaryImage takes in a BitMatrix representing a binary image (as output by binarizeImage) and the location of a QR code. It returns a BitMatrix representing the raw QR code.
image - a BitMatrix representing a binary image (as output by binarizeImage)location - The location of a QR code, as returned by locateQRInBinaryImageextractQRFromBinaryImage a BitMatrix representing the extracted QR code. The matrix is size N by N where N is the number of "blocks" along the edge of the QR code.
decodeQR takes in a BitMatrix representing a raw QR code (as output by extractQRFromBinaryImage) and returns a string of decoded data. It is the last step in the QR decoding process.
qrCode - a BitMatrix representing a raw QR code (as output by extractQRFromBinaryImage)Throughout the QR extraction and decoding process data is often represented as a BitMatrix.
BitMatrices are a convenient way to represent and interact with a 2d array of booleans.
width - The width of the matrix.height - The height of the matrix.data - The underlying data (represented as a 1d array)get(x, y) - Get the bit at specific coordinates.set(x, y, bit) - Set the bit at specific coordinates.createBitMatrix is a convenience method for creating bit matrices.
data - A 1d array of booleans representing the data represented by the bit matrix.width - The width of the matrix (height is inferred by data.length / width).jsQR was originally written by porting over the ZXing C# library directly to typescript. This lead to code that works extremely well, but may not follow best javascript practices.
The next steps (which are ongoing) are to port over any test cases (writing any that don't exist), and refactor each of the modules into more idomatic code. The end goal is a pure JS library QR library that is as fully featured as the ZXing library, but maintainable and extendable in it's own right.
jsQR is written using typescript.
You can view the development source in the src directory.
Currently the library is very untested, but tests are being added as the library is refactored into more maintainable code. Tests can be run via
npm test
After testing any changes, you can compile the production version by running
npm run-script build
Pull requests are welcome! Please create seperate branches for seperate features/patches.
FAQs
A pure javascript QR code reading library that takes in raw images and will locate, extract and parse any QR code found within.
The npm package jsqr receives a total of 234,153 weekly downloads. As such, jsqr popularity was classified as popular.
We found that jsqr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.