works inconsistently with the same exact image

[lebed2045]

jsQR can't find Qr on this picture, but when I open this picture above and take screenshot of it on the Macbook - it can find qr and successfully decode it! So this is screenshot of screenshot:

This is how I used the jsQR library:

  const handleFileInput = (e: any) => {
    const reader = new FileReader();
    // @ts-ignore
    const canvasCtx = canvasRef.current.getContext('2d');

    reader.onload = readerEvent => {
      setStatusMessage('');
      setStatusMessage('opening file...');
      // eslint-disable-next-line no-undef
      const image = new Image();

      image.onload = () => {
        // @ts-ignore
        canvasRef.current.width = image.width;
        // @ts-ignore
        canvasRef.current.height = image.height;
        canvasCtx.drawImage(image, 0, 0);
        const imageData = canvasCtx.getImageData(
          0,
          0,
          image.width,
          image.height
        );

        const jsqrResponse = jsQR(imageData.data, image.width, image.height);
        if (jsqrResponse) {
          const potentialQrKey = jsqrResponse.data; // find QR!
          tryToRestoreWallet(potentialQrKey);
        } else {
          setStatusMessage('');
          setErrorMessage("Couldn't find  QR-key on the image");
          console.log('QR error!');
        }
      };
      // @ts-ignore
      image.src = readerEvent.target.result;
    };

    reader.readAsDataURL(e.target.files[0]);
  };

is there any way to fix it? thanks!

[pbeart]

Have you tried adding some white padding around the first image?