qr-scanner

test for bug report

by s_light

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/qr-scanner/1.4.1/qr-scanner.min.js"></script>

<section>
  <img src="https://github.com/s-light/qr_test_images/blob/main/test55331101.jpg?raw=true" />
  <img src="https://github.com/s-light/qr_test_images/blob/main/test55331102.png?raw=true" />
  <img src="https://github.com/s-light/qr_test_images/blob/main/test55331103__4000x3000.png?raw=true" />
  <img src="https://github.com/s-light/qr_test_images/blob/main/test55331104__3000x4000.png?raw=true" />
</section>

<button>
start scanning
</button>

CSS

section {
  display:flex;
  flex-direction: row;
}

img {
    display: block;
    max-width: 40vw;
    max-height: 40vh;
    min-width: 5vw;
    min-height: 2vh;
    margin: 1em;
}

JavaScript

// do to security this test does not work...
// so i created a test case at
// https://s-light.github.io/qr_test_images/scan.html

import QrScanner from 'https://cdnjs.cloudflare.com/ajax/libs/qr-scanner/1.4.1/qr-scanner.min.js';

function startScanning() {

  const imgList = document.querySelectorAll("img");
  console.log("imgList.length", imgList.length);

  const qrscanning = [];

  for (const image of imgList) {
    console.log("start scann for ", image.src);
    qrscanning.push(
      QrScanner.scanImage(image.src, {
        returnDetailedScanResult: true
      })
      .then(result => console.log(result))
      .catch(error => {
      	console.log("scan error", error || 'No QR code found.')
      })
    );
  }

  Promise.allSettled(qrscanning).then(() => {
    console.log("all images are scanned...");
  }).catch((error) => {
    console.error("qrscanning catch:", error);
  })
}


const button = document.querySelector("button");
button.addEventListener('click', startScanning);