Reading QR code from .png /.jpg file

[apoorvaravi]

Hi,
I am trying to read the qr code from png/jpg files, i am currently converting the File to a img via readAsDataURL and getting a canvas element to convert the image to imageData.
1.image.src = reader.readAsDataURL(); //sample code
2. create canvas.
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, 100, 100);
3. const code = jsQR(imageData.data, 100, 100); and get code as null.
I cannot use any decodeQRFromImage functions in jsQR, as my typescript app does not find it with
import jsQR from 'jsqr';
Can you please let me know how i can import png/jpg files with qr code to use this library.
I am using a simple png file.

[cozmo]

Hey! I think your import jsQR from 'jsqr'; error could have been fixed in #51 (1.0.4). If so - sorry about that.

As far as the rest of your question your approach probably works, but there may be a simpler way to read the file directly (bypassing the canvas) by using something like https://github.com/arian/pngjs

I've mocked up an example of this here https://codesandbox.io/s/pwoywz6n5x

The pros of this is avoiding the usage of Canvas as a conversion layer and just directly reading the image data. The main con is the library I used doesn't expose a clean way to get the image data as a byte array, so we have to construct it ourselves. This accounts for roughly 50% of the code. This could be solved by using a different frontend png library.

Hope this helps!

I'm going to try to make a PR to png.js to allow getting the pixel array directly and then will put this example into jsQR to help people in the future.

[cozmo]

Going to close this issue for now - Please re-open if you have more questions/this doesn't solve your problem.

[dakshshah96]

@cozmo Can you please help me with an example implementation using JPG/JPEG files instead of PNG?

I'm really new to this and can't figure out how to translate your PNG implementation to work with JPG files.

Thanks!

[frank9615]

``> @cozmo Can you please help me with an example implementation using JPG/JPEG files instead of PNG?

I'm really new to this and can't figure out how to translate your PNG implementation to work with JPG files.

Thanks!

const jpeg = require('jpeg-js');

let imagedata = fs.readFileSync(image)
const jpgData = jpeg.decode(imagedata, { useTArray: true });
const qrArray = new Uint8ClampedArray(jpgData.data.buffer);
return JSON.parse(jsQR(qrArray, jpgData.width, jpgData.height).data);