library icon indicating copy to clipboard operation
library copied to clipboard

Published 20 hours ago • verified publisher icon zxing-js

decodeFromImage not working

Open XavierTM opened this issue 2 years ago • 4 comments

Bug Description BrowserMultiFormatReader.decodeFromImage and BrowserQRCodeReader.decodeFromImage not working.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://zxing-js.github.io/library/examples/multi-image/
  2. Click on DECODE button.
  3. See the error.

Expected behavior Detecting the qr code on the image

Screenshots image

Desktop

  • OS: MacOS
  • Browser: Chrome
  • Version: latest

Additional context I also wrote my own code to test

<html>

<head>
	<title>ZXing Canvas Test</title>
</head>

<body>

	<img src="https://blog.hubspot.com/hs-fs/hub/53/file-2457427390-jpg/00-Blog_Thinkstock_Images/qr-code.jpg?width=381&name=qr-code.jpg" />

	<script src="https://unpkg.com/@zxing/library@latest"></script>

	<script>
		const { BrowserQRCodeReader } = ZXing;
		const reader = new BrowserQRCodeReader();
		
		(async () => {
			try {
				const img = document.querySelector("img");
				const results = await reader.decodeFromImage(img);
				console.log(results);
			} catch (err) {
				console.log(err);
			}
		})();
	</script>
</body>
</html>

XavierTM avatar Jun 30 '22 09:06 XavierTM

I was able to replicate this. It's also true for Data Matrix decodes.

transiscodev avatar Oct 24 '22 20:10 transiscodev

this.$el.innerHTML += <img id="image" src="qr.png"/>; const img = document.getElementById('image'); img.videoWidth = 0;

For my solution !

mengyi-dev avatar Apr 13 '23 03:04 mengyi-dev

Stale issue message

github-actions[bot] avatar Apr 29 '24 10:04 github-actions[bot]