search

zxing-js / library

Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
https://zxing-js.github.io/library/
Apache License 2.0
2.39k stars 536 forks source link

Bug: Not working with inline image URL #76

Closed mrlubos closed 4 years ago

mrlubos commented 5 years ago

Hey,

I am trying to use this library to decode a QR code rendered on canvas. To achieve that, I use canvas.toDataURL() to encode the QR code in the image URL. This gives us something like this.

data:image/png;base64,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

We then render the image on page like so.

const img = new Image();
img.height = canvas.height;
img.src = canvas.toDataURL();
img.width = canvas.width;
document.body.appendChild(img);

Finally, we try to decode our QR code.

const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(img);

Unfortunately, this operation fails with the following error message.

Error
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.selectBestPatterns (FinderPatternFinder.js:546)
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.find (FinderPatternFinder.js:165)
    at Detector.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/Detector.js.Detector.detect (Detector.js:66)
    at QRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/QRCodeReader.js.QRCodeReader.decode (QRCodeReader.js:63)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.readerDecode (BrowserCodeReader.js:254)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeOnce (BrowserCodeReader.js:229)
    at BrowserCodeReader.js:180
    at new Promise (<anonymous>)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeFromImage (BrowserCodeReader.js:171)
    at index.js:100

If I try to screenshot the rendered <img />, save it to my computer as screenshot.jpg and modify my code as follows...

img.src = 'C:\fakepath\screenshot.jpg'

...we get back this.

{
    format: 11,
    numBits: 288,
    rawBytes: Uint8Array(36) [65, 183, 55, 87, 6, 87, 39, 54, 86, 55, 87, 38, 86, 182, 87, 151, 7, 38, 247, 
70, 86, 55, 70, 86, 70, 86, 70, 151, 64, 236, 17, 236, 17, 236, 17, 236],
    resultMetadata: Map(2) {2 => Array(1), 3 => "H"},
    resultPoints: (4) [FinderPattern, FinderPattern, FinderPattern, AlignmentPattern],
    text: "supersecurekeyprotectededit",
    timestamp: 1533052481452
}

Yay, it works! However, this is not a desired behaviour as we cannot expect the user to download a picture of the canvas on their computer and then upload it again.

Any suggestions how to fix this? I am sure there is a way to achieve what I am trying to do since scanning input from device camera is essentially doing the same thing. Thanks!

odahcam commented 5 years ago

As I can see, you're trying to decode from your new Image() instance, please try to decode from the canvas context where you "drawed" your image. 🤔

mrlubos commented 5 years ago

Hi @odahcam, thank you for helping out! Are you saying I should do the following?

const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(canvas);

or perhaps pass even the context itself?

const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(canvas.getContext('2d'));

Should I keep using the same function or is there a different method for canvas?

Thanks!

odahcam commented 5 years ago

Sorry 'bout that! The Browser layer is a mess at the moment. 🤦‍♂️

You can use the core reader and then pass the image's buffer (byteArray) value, you can use getImageData for that, then pass the value to decode.

Anyway, the browser code reader should work fine with the HTMLImageElement as a parameter. AS you can see here, the scanner works with the onload event, maybe that's the problem, maybe you can try passing a imageUrl by the second parameter.

Sorry for the 💩 support, I don't use the browser scanner, that's the problem here. 😅

I'm promise I'll give you support until we solve this. ⚡️

mrlubos commented 5 years ago

Hey @odahcam thank you for your support! I did not have time to look into this yet, possibly next week, could create a demo for you too to test this.

EDIT: I did try passing the imageUrl instead to second parameter as (undefined, url) before I posted the original post though, that did not help hence I created the issue.

odahcam commented 5 years ago

That's ok, if you can provide a StackBlitz or https://codesandbox.io/ like example, we probably can solve this faster. 🙂

mrlubos commented 5 years ago

Hi @odahcam, looking into this issue now. So far tried your first suggestion with canvas, passing both canvas or context as the first parameter to decodeFromImage() throws an error

Error: either src or a loaded img should be provided

I will investigate further and add any comments here. Will also create a demo if nothing helps.

mrlubos commented 5 years ago

@odahcam Looking at the second suggestion.

You can use the core reader and then pass the image's buffer (byteArray) value, you can use getImageData for that, then pass the value to decode.

So I obtain imageData like this

const imageData = ctx.createImageData(image.width, image.height);

And it's going to have a value similar to this when logged to console.

ImageData {data: Uint8ClampedArray(65536), width: 128, height: 128}
  data: Uint8ClampedArray(65536) [0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …]
  height: 128
  width: 128

I then use the core reader's decode function like this.

const QRReader = new ZXing.QRCodeReader();
QRReader.decode(imageData);

This will throw an error saying this.

QRCodeReader.js:63 Uncaught (in promise) TypeError: image.getBlackMatrix is not a function
    at QRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/QRCodeReader.js.QRCodeReader.decode (QRCodeReader.js:63)
    at index.js:94

Here's the specific line where it fails.

https://github.com/zxing-js/library/blob/af16fdb2a72b331394dfe22b549703bdfefcae90/src/core/qrcode/QRCodeReader.ts#L75

mrlubos commented 5 years ago

@odahcam Passing image url to the decodeFromImage() method like this

const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(undefined, img.src); // see original post for `img.src` value

causes this error.

Error
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.selectBestPatterns (FinderPatternFinder.js:546)
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.find (FinderPatternFinder.js:165)
    at Detector.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/Detector.js.Detector.detect (Detector.js:66)
    at QRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/QRCodeReader.js.QRCodeReader.decode (QRCodeReader.js:63)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.readerDecode (BrowserCodeReader.js:252)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeOnce (BrowserCodeReader.js:228)
    at HTMLImageElement.me.imageLoadedEventListener (BrowserCodeReader.js:173)

Looks like I need to create a demo, not sure where to go from here otherwise. Will send you link once it's ready.

mrlubos commented 5 years ago

@odahcam Hey, here is the demo as promised. Let me know if anything is not clear, although I narrowed it down as much as possible, the issue starts on line 56 to line 77. Thanks for looking into this!

odahcam commented 5 years ago

I'm glad to see that you're using react, it means we'r really going far here. 😄

Also, I saw you're using a <canvas> and that's great, because it means you don't need the HTMLImageElement for decoding nor the browser layer at all! Let's try to take that Uint8ClampedArray and pass directly into the decode method, which consumes this kinda data to decode. I'll manage to create an example for you soon!

odahcam commented 5 years ago

Well, I created the example but something stills wrong, looks like it is not in the library's code, so I would like you to take a look at it, good luck: https://codesandbox.io/s/o132m6jny

mrlubos commented 5 years ago

Hi @odahcam, thank you! I tried the same example file and it throws this error

Uncaught (in promise) Error
    at t.selectBestPatterns (index.min.js:1)
    at t.find (index.min.js:1)
    at t.detect (index.min.js:1)
    at t.decode (index.min.js:1)
    at App._callee$ (App.js? [sm]:89)
    at g (common-sandbox.edbc04b9.chunk.js:1)
    at Generator._invoke (common-sandbox.edbc04b9.chunk.js:1)
    at Generator.e.(anonymous function) [as next] (https://codesandbox.io/static/js/common-sandbox.edbc04b9.chunk.js:1:181512)
    at step (App.js? [sm]:3)
    at eval (App.js? [sm]:3)

Were you able to get it working with another file?

In the end, the use case I am trying to solve for is uploading an arbitrary pdf file, extract the QR code image from it and decode its value. If there is a way to achieve this going around this bug, that would work, do you have any suggestions?

Also, the error above throws in selectBestPatterns() which is the same function that I posted in the first post. Can you tell me what is actually going wrong there? This is the first time I use this library, all I am looking to do is decode that QR code really. 😬 (if there is another library better suited for this, I am up for suggestions)

odahcam commented 5 years ago

I was thinking in some "hints" bug, but I was unable to really prove it because I ran out of time. 😨

JoeKahl commented 5 years ago

We want to use this library, but we cannot get it to work for us. Please check out the demo that is failing. https://codesandbox.io/s/n70v00360 Your demo here: https://zxing-js.github.io/library/examples/barcode-image/ Has code that does not work for me: new ZXing.BrowserBarcodeReader('video'); For me, using the typescript library, the signature allows only a number: timeBetweenScansMillis. So it seems that your demo is not using the latest version.

odahcam commented 5 years ago

Thanks for the report and sorry for the lack of support, I'm very busy with personal business last days and it's been very hard to do a good job here, but we'll very soon get it working.

JoeKahl commented 5 years ago

Thanks for the report and sorry for the lack of support, I'm very busy with personal business last days and it's been very hard to do a good job here, but we'll very soon get it working.

Thank you for your reply. I will continue to experiment with my CodeSandbox. Maybe I am not implementing correctly. If I resolve this issue for myself I will share that news with you. https://codesandbox.io/s/n70v00360

odahcam commented 5 years ago

Thanks! I'm aware that there is an issue, but I couldn't isolate the problem yet. Probably it is not related to your code, but to the library itself.

ansarikhurshid786 commented 5 years ago

I am also facing same issue.

ghost commented 5 years ago

Is there any solution of this ? I also doing same to create Image and set src but decodeFromImage given error that "either src or a loaded img should be provided"

github-actions[bot] commented 4 years ago

Stale issue message

mrlubos commented 4 years ago

Still not fixed, bot. 🥴

odahcam commented 4 years ago

It should be working by now. I'll try to take a look this weekend.

kunal3210 commented 4 years ago

@mrlubos I had the same issue i solved it and it works.You just need to cut the data:image/png;base64, part of the string and then just pass the remaining string further to the function.It worked for me just try it.

odahcam commented 4 years ago

I have successfully decoded the following image:

image

The code I've used:

image

The base64 variable:

var base64 = 'data:image/png;base64,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';

The image source is from: https://github.com/cozmo/jsQR/issues/96#issuecomment-466626352

bellaj commented 3 years ago

It seems to be an issue related to the image size. if it is modified when qr is created this problem occurs.