Reactで、画像からQRコードを読み取る方法

npm i jsqr

import jsQR, { type QRCode } from 'jsqr';

export type QrResult = {
  code: QRCode | null;
  text: string; // 読み取った文字（読めなければ空）
  scale: number; // 元の画像に対する縮小率（位置を元の大きさに戻すのに使う）
  width: number; // 元の画像の幅
  height: number; // 元の画像の高さ
};

// 長い辺が maxSide 以下になるように縮め、白い背景の上に描いて画素を読む
export async function readPixels(file: Blob, maxSide = 1000) {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height));
  const w = Math.max(1, Math.round(bitmap.width * scale));
  const h = Math.max(1, Math.round(bitmap.height * scale));
  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext('2d')!;
  ctx.fillStyle = '#fff'; // 透明な部分を白にする
  ctx.fillRect(0, 0, w, h);
  ctx.drawImage(bitmap, 0, 0, w, h);
  const size = { width: bitmap.width, height: bitmap.height };
  bitmap.close();
  return { image: ctx.getImageData(0, 0, w, h), scale, ...size };
}

// jsQR が data を空で返したときは、バイト列を UTF-8、だめなら Shift_JIS として読む
export function textOf(code: QRCode): string {
  if (code.data !== '' || code.binaryData.length === 0) return code.data;
  const bytes = new Uint8Array(code.binaryData);
  try {
    return new TextDecoder('utf-8', { fatal: true }).decode(bytes);
  } catch {
    return new TextDecoder('shift_jis').decode(bytes);
  }
}

export async function readQr(file: Blob, maxSide = 1000): Promise<QrResult> {
  const { image, scale, width, height } = await readPixels(file, maxSide);
  const code = jsQR(image.data, image.width, image.height, {
    inversionAttempts: 'attemptBoth', // 黒地に白の QR コードも読む
  });
  return { code, text: code ? textOf(code) : '', scale, width, height };
}

// http と https のときだけリンクにする
export function toSafeUrl(text: string): string | null {
  try {
    const url = new URL(text);
    return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null;
  } catch {
    return null;
  }
}

オプションなし（1回目）: 読めた
dontInvert を渡す: 読めない
オプションなし（2回目）: 読めない
onlyInvert を渡す: 例外 TypeError: Cannot read properties of undefined (reading 'height')
オプションなし（3回目）: 例外 TypeError: Cannot read properties of undefined (reading 'height')
attemptBoth を渡す: 読めた
オプションなし（4回目）: 読めた

import { useEffect, useId, useState } from 'react';
import { readQr, toSafeUrl, type QrResult } from './readQr';

type State =
  | { status: 'idle' }
  | { status: 'reading' }
  | { status: 'done'; src: string; result: QrResult }
  | { status: 'error'; message: string };

export function QrReader() {
  const inputId = useId();
  const [file, setFile] = useState<File | null>(null);
  const [state, setState] = useState<State>({ status: 'idle' });

  useEffect(() => {
    if (!file) return;
    let ignore = false;
    const src = URL.createObjectURL(file);
    setState({ status: 'reading' });
    readQr(file)
      .then((result) => {
        if (!ignore) setState({ status: 'done', src, result });
      })
      .catch(() => {
        if (!ignore) setState({ status: 'error', message: '画像を読み込めませんでした' });
      });
    return () => {
      ignore = true;
      URL.revokeObjectURL(src);
    };
  }, [file]);

  return (
    <div className="qr-reader">
      <label htmlFor={inputId}>QR コードが写った画像を選ぶ</label>
      <input
        id={inputId}
        type="file"
        accept="image/*"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      {state.status === 'reading' && <p>読み取っています…</p>}
      {state.status === 'error' && <p role="alert">{state.message}</p>}
      {state.status === 'done' && <Result src={state.src} result={state.result} />}
    </div>
  );
}

function Result({ src, result }: { src: string; result: QrResult }) {
  const { code, text, scale, width, height } = result;
  const url = toSafeUrl(text);
  // jsQR が返す四隅の位置は縮めた画像の座標なので、元の大きさに戻す
  const points = code
    ? [code.location.topLeftCorner, code.location.topRightCorner,
       code.location.bottomRightCorner, code.location.bottomLeftCorner]
        .map((p) => `${p.x / scale},${p.y / scale}`)
        .join(' ')
    : '';
  return (
    <div>
      <div style={{ position: 'relative', maxWidth: 360 }}>
        <img src={src} alt="選んだ画像" style={{ width: '100%', display: 'block' }} />
        {code && (
          <svg viewBox={`0 0 ${width} ${height}`} width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
            <polygon points={points} fill="none" stroke="#00c8e8" strokeWidth={width / 100} />
          </svg>
        )}
      </div>
      {!code ? (
        <p role="status" className="qr-result">QR コードが見つかりませんでした</p>
      ) : (
        <p role="status" className="qr-result">
          読み取った文字：
          {url ? <a href={url} rel="noopener noreferrer" target="_blank">{text}</a> : <output>{text}</output>}
        </p>
      )}
    </div>
  );
}