Inverted QR codes (#94)

[fante90]

Hi @mebjas
I'm using your library and I caught in the same problem of #94 and I tried to solve the issue.
My code tries to scan the QR Code in the four possible cases:

• Normal context
• Flipped context (if disableFlip is off)
• Inverted color context
• Flipped inverted color context (if disableFlip is off)

I did some tests in various color combinations always getting a positive result when the contrast between background and foreground is quite clear.
If you had some time to have a look, I would be happy to have your opinion.

Regards
@fante90

[joncon62]

I'm using this version to be able to scan inverted QR codes and it works on my mac but it doesn't work in iOS on my iPhone. Any ideas why this is and how to get it working? Normal QR codes work.

[fante90]

I'm using this version to be able to scan inverted QR codes and it works on my mac but it doesn't work in iOS on my iPhone. Any ideas why this is and how to get it working? Normal QR codes work.

Hi @joncon62,
the problem is CanvasRenderingContext2D.filter that is not supported in Safari.
I fixed it in my project some time ago, I'll try to commit the fix here in a couple of days.

[ROBERT-MCDOWELL]

@fante90 it's supported on Safari, but there is a bug reported here
https://bugs.webkit.org/show_bug.cgi?id=198416
so better to wait

[fante90]

@ROBERT-MCDOWELL from what I understand is not supported, it's not a bug, see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

[ROBERT-MCDOWELL]

@fante90 yes it's a bug, click on browser compatibility table -> safari -> https://bugs.webkit.org/show_bug.cgi?id=198416
if I say it's a bug IT IS a bug. I provided you the webkit bug as PROOF.

[fante90]

@ROBERT-MCDOWELL keep calm, we are here to talk.
The bug is a request to consider adding support for applying CSS-like filters to 2D canvas contexts, in my opinion it's a feature request, but it's my opinion.
Net of personal considerations, the bug was opened in 2019, 5 years ago, and it doesn't seem like it will be resolved soon so I think applying a patch that resolves the problem with Safari could be a good idea.

[ROBERT-MCDOWELL]

@fante90 I'm calm, I just can't stand people not believing what I'm saying, it's waste of time for me...
believe what you want, and read again the bug which is NOT ONLY the css but MDM specified it as a bug. and if it's not resolved
since 2019 go ahead to apple developers to ask why, not here. and the pacth must be for Safari browser, not html5-qrcode which depends 100% of the Safari webkit engine... try to understand that all Javascript issues coming from browser must be solved at the browser level, no choice. but if you really think that you can make a patch on html5-qrcode to solve a browser level issue so go ahead, I will be curious how you will modify the JS browser engine just for hmtl5-qrcode.

[fante90]

@ROBERT-MCDOWELL have you ever heard of polyfill? https://github.com/davidenke/context-filter-polyfill

[ROBERT-MCDOWELL]

if you want to add a full polyfill js file on top of html5-qrcode just for one function so do it.

[fante90]

@ROBERT-MCDOWELL I simply took the invert function from that polyfill and it works.
@joncon62 can you give me a feedback?

thank you

[joncon62]

@fante90 did you create a new html5-qrcode.min.js ? I can see you modified html5-qrcode.ts but I don't know what to do with that, sorry!

[fante90]

@joncon62 if you see my commits, I’ve ever commit only html5-qrcode.ts never the files in dist folder. In order to obtain the js file checkout my branch and follow this instructions https://github.com/mebjas/html5-qrcode?tab=readme-ov-file#how-to-modify-and-build

[joncon62]

I managed to build the .js file and tested it out. I can't get inverted QR codes to work on my iPhone in either Safari or Chrome browsers. Normal QR codes do work.

[fansanelli]

I managed to build the .js file and tested it out. I can't get inverted QR codes to work on my iPhone in either Safari or Chrome browsers. Normal QR codes do work.

Can you share your QR code?

[joncon62]

Here are the normal and dark codes:

Now I see them together I just noticed that the dark one is not inverted, it just has a dark border. This was created by putting the phone into 'dark mode' - any idea how I can get this to be recognised?

Also, both codes are recognised if I scan them on a mac with this code, the 'dark' one doesn't work on an iPhone.

[joncon62]

Further to my previous message, I have now added a margin to the QR code so that when the phone is in dark mode it now works. Unfortunately I have thousands of non-margin QR codes out there so how can I get the iPhone to recognise the non-margin dark code?

[ROBERT-MCDOWELL]

@joncon62 html5-qrcode (and probably most of qr-code scanners) need this white border to clearly differentiate the black squares which are data. if the border is dark and touching these black square so indeed it won't gues if it's data or the border.

[ROBERT-MCDOWELL]

create an image batch automation with photoshop or maybe on line tool

[joncon62]

Unfortunately the QR codes are in customer emails already sent out so I can't change them. This is only a problem for people who choose to use dark mode and we can always ask them to turn light mode back on - but it's a bit of a hassle and many don't even know how to do that! Is there a way to scan a QR code without a quiet zone? Can a pseudo quiet zone be added to the canvas?

[ROBERT-MCDOWELL]

what you can do is before the scanner capture function make a new function that capture one frame from the canvas then manipulate the image adding a white square around then provide this frame to the html5-qrcode scanner function

[fansanelli]

@joncon62 this is out of the scope of the PR. Please open an issue if you need to support QR codes without border, this PR is about inverted colours (black background).