Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web] Mobile Scanner not working with colored (other than black) QR codes #1278

Open
RVD-IT-Solutions opened this issue Jan 7, 2025 · 0 comments

Comments

@RVD-IT-Solutions
Copy link

RVD-IT-Solutions commented Jan 7, 2025

I’m experiencing an issue with the following in the Mobile Scanner Flutter package:

Given the image below, it seems that the library is not able to scan QR codes that is other than black when using the app in web?
Android and iOS works fine.

Original QR code

Edit:

I've tried inverting the image above and can confirm it works then:
Inverted QR code

I also decoded the inverted QR code with the help of using <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.min.js"></script> in my index.html file(since .analyzeImage() doesn't work in Web) and used it as such:

import 'dart:js' as js;

String? decodeQRCode(Uint8List imageData, int width, int height) {
    final jsQr = js.context['jsQR'];
    if (jsQr == null) {
      throw Exception(
          'jsQR library is not loaded. Ensure it is included in index.html.');
    }

    final result = jsQr.callMethod('default', [
      js.JsObject.jsify(imageData),
      width,
      height,
    ]);

    return result?['data'];
  }

and after I invert it like such:

Uint8List invertColors(Uint8List data) {
    final inverted = Uint8List(data.length);
    for (int i = 0; i < data.length; i++) {
      inverted[i] = 255 - data[i];
    }
    return inverted;
  }

and then:

import 'dart:html' as html;

void _pickImageWeb() async {
    final html.FileUploadInputElement uploadInput =
        html.FileUploadInputElement();
    uploadInput.accept = 'image/*';
    uploadInput.click();

    uploadInput.onChange.listen((event) async {
      final files = uploadInput.files;
      if (files != null && files.isNotEmpty) {
        final reader = html.FileReader();
        reader.readAsDataUrl(files[0]);

        reader.onLoadEnd.listen((event) async {
          final imageUrl = reader.result as String;

          final html.ImageElement image = html.ImageElement();
          image.src = imageUrl;

          await image.onLoad.first;

          final html.CanvasElement canvas = html.CanvasElement(
            width: image.width,
            height: image.height,
          );
          final ctx = canvas.context2D;
          ctx.drawImage(image, 0, 0);

          final imageData = ctx.getImageData(0, 0, image.width!, image.height!);
          final imageDataList = Uint8List.fromList(imageData.data);
          final invertedData = invertColors(imageDataList);

          final result =
              decodeQRCode(invertedData, image.width!, image.height!);
          print(result);
          String qrCode = result ?? 'Geen QR gevind nie!!!';
        });
      }
    });
  }

Is this a ML Kit bug or something else? Why would it work on Android and iOS and not in Web?

@RVD-IT-Solutions RVD-IT-Solutions changed the title [web] Mobile Scanner not working with colored QR codes [web] Mobile Scanner not working with colored (other than black) QR codes Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant