Reactで、ファイルの先頭のバイトから画像の種類を調べる方法

00 00 00 1c 66 74 79 70 61 76 69 66 00 00 00 00
            f  t  y  p  a  v  i  f

export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp' | 'image/bmp' | 'image/x-icon' | 'image/avif';

// null は「どの値でもよい」バイト
type Signature = { type: ImageType; bytes: (number | null)[] };

const ascii = (s: string) => Array.from(s, (c) => c.charCodeAt(0));
const any = (n: number) => Array<null>(n).fill(null);

const SIGNATURES: Signature[] = [
  { type: 'image/png', bytes: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a] },
  { type: 'image/jpeg', bytes: [0xff, 0xd8, 0xff] },
  { type: 'image/gif', bytes: ascii('GIF87a') },
  { type: 'image/gif', bytes: ascii('GIF89a') },
  { type: 'image/webp', bytes: [...ascii('RIFF'), ...any(4), ...ascii('WEBPVP')] },
  { type: 'image/bmp', bytes: ascii('BM') },
  { type: 'image/x-icon', bytes: [0x00, 0x00, 0x01, 0x00] },
  { type: 'image/x-icon', bytes: [0x00, 0x00, 0x02, 0x00] },
  // AVIF：5バイト目からの ftyp の文字に続く、最初のブランドが avif か avis
  { type: 'image/avif', bytes: [...any(4), ...ascii('ftypavif')] },
  { type: 'image/avif', bytes: [...any(4), ...ascii('ftypavis')] },
];

export const HEAD_SIZE = 16;

export function matchImageType(head: Uint8Array): ImageType | null {
  const hit = SIGNATURES.find(
    (s) => head.length >= s.bytes.length && s.bytes.every((b, i) => b === null || head[i] === b),
  );
  return hit?.type ?? null;
}

// ファイル全体ではなく、先頭の16バイトだけを読む
export async function readHead(file: Blob): Promise<Uint8Array> {
  return new Uint8Array(await file.slice(0, HEAD_SIZE).arrayBuffer());
}

export function toHex(bytes: Uint8Array): string {
  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join(' ');
}

import { useEffect, useId, useState } from 'react';
import { matchImageType, readHead, toHex, type ImageType } from './imageType';

type Result = { file: File; head: string; detected: ImageType | null };

export function ImageTypeCheck() {
  const [file, setFile] = useState<File | null>(null);
  const [result, setResult] = useState<Result | null>(null);
  const id = useId();

  useEffect(() => {
    if (!file) return;
    let ignore = false;
    readHead(file).then((head) => {
      if (!ignore) setResult({ file, head: toHex(head), detected: matchImageType(head) });
    });
    return () => {
      ignore = true; // 別のファイルを選んだら、前のファイルの結果は捨てる
    };
  }, [file]);

  const current = result?.file === file ? result : null;

  return (
    <div className="image-type">
      <p>
        <label htmlFor={id}>画像ファイル</label>
        <input id={id} type="file" accept="image/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      </p>
      {file && (
        <section aria-live="polite">
          <p className="name">{file.name}</p>
          <p>拡張子から決まった type：<code className="declared">{file.type || '（空）'}</code></p>
          {current && (
            <>
              <p>先頭のバイト：<code className="head">{current.head || '（なし）'}</code></p>
              <p>中身から調べた種類：<code className="detected">{current.detected ?? '画像ではない'}</code></p>
              <Verdict declared={file.type} detected={current.detected} />
            </>
          )}
        </section>
      )}
    </div>
  );
}

function Verdict({ declared, detected }: { declared: string; detected: ImageType | null }) {
  if (!detected) return <p className="verdict ng">対応している画像ではありません</p>;
  if (!declared) return <p className="verdict warn">拡張子から種類が分かりません（中身は {detected}）</p>;
  if (declared !== detected) return <p className="verdict warn">拡張子と中身が違います（中身は {detected}）</p>;
  return <p className="verdict ok">拡張子と中身が一致しています</p>;
}

cat.png          | image/png  | image/png    | 拡張子と中身が一致しています
cat.jpg          | image/jpeg | image/jpeg   | 拡張子と中身が一致しています
cat.gif          | image/gif  | image/gif    | 拡張子と中身が一致しています
cat.webp         | image/webp | image/webp   | 拡張子と中身が一致しています
cat.avif         | image/avif | image/avif   | 拡張子と中身が一致しています
cat.bmp          | image/bmp  | image/bmp    | 拡張子と中身が一致しています
jpeg-renamed.png | image/png  | image/jpeg   | 拡張子と中身が違います（中身は image/jpeg）
text-renamed.png | image/png  | 画像ではない | 対応している画像ではありません
empty.png        | image/png  | 画像ではない | 対応している画像ではありません
cat              | （空）     | image/png    | 拡張子から種類が分かりません（中身は image/png）
mif1-brand.avif  | image/avif | 画像ではない | 対応している画像ではありません

cat.png 64×64
cat.jpg 64×64
cat.gif 64×64
cat.webp 64×64
cat.avif 64×64
cat.bmp 1×1
jpeg-renamed.png 64×64
text-renamed.png InvalidStateError
mif1-brand.avif InvalidStateError
large-200mb.png InvalidStateError