You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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
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:and after I invert it like such:
and then:
Is this a ML Kit bug or something else? Why would it work on Android and iOS and not in Web?
The text was updated successfully, but these errors were encountered: