Reactで、2枚の画像の違う部分を色で示す方法

// 選んだファイルを読み込み、画素の値を取り出す
export async function loadImageData(file: File): Promise<ImageData> {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('canvas が使えません');
  ctx.drawImage(bitmap, 0, 0);
  bitmap.close();
  return ctx.getImageData(0, 0, canvas.width, canvas.height);
}

export type DiffResult = { image: ImageData; changed: number };

// 違う画素を塗る色（R, G, B）
const MARK = [216, 88, 120];

// 2枚の画像を1画素ずつ比べる。R・G・B の差のうち最も大きいものが threshold を超えた画素をピンクに塗り、
// それ以外の画素は、変更前の画像の明るさを薄くした灰色にする
export function diffImageData(before: ImageData, after: ImageData, threshold: number): DiffResult {
  if (before.width !== after.width || before.height !== after.height) {
    throw new Error('2枚の画像の大きさが違います');
  }
  const a = before.data;
  const b = after.data;
  const image = new ImageData(before.width, before.height);
  const out = image.data;
  let changed = 0;
  for (let i = 0; i < a.length; i += 4) {
    const d = Math.max(Math.abs(a[i] - b[i]), Math.abs(a[i + 1] - b[i + 1]), Math.abs(a[i + 2] - b[i + 2]));
    if (d > threshold) {
      out[i] = MARK[0];
      out[i + 1] = MARK[1];
      out[i + 2] = MARK[2];
      changed++;
    } else {
      // 明るさ（0〜255）を求め、白に近づけて薄く見せる
      const lum = 0.299 * a[i] + 0.587 * a[i + 1] + 0.114 * a[i + 2];
      const v = Math.round(255 - (255 - lum) * 0.25);
      out[i] = out[i + 1] = out[i + 2] = v;
    }
    out[i + 3] = 255;
  }
  return { image, changed };
}

import { useEffect, useMemo, useRef, useState } from 'react';
import type { ChangeEvent } from 'react';
import { diffImageData, loadImageData } from './diff';

export function App() {
  const [before, setBefore] = useState<ImageData | null>(null);
  const [after, setAfter] = useState<ImageData | null>(null);
  const [threshold, setThreshold] = useState(0);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // 2枚がそろい、大きさが同じときだけ比べる
  const sameSize = before && after && before.width === after.width && before.height === after.height;
  const result = useMemo(
    () => (before && after && sameSize ? diffImageData(before, after, threshold) : null),
    [before, after, sameSize, threshold],
  );

  // 比べた結果を canvas に描く
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!result || !canvas) return;
    canvas.width = result.image.width;
    canvas.height = result.image.height;
    canvas.getContext('2d')?.putImageData(result.image, 0, 0);
  }, [result]);

  function pick(set: (d: ImageData) => void) {
    return async (e: ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0];
      if (file) set(await loadImageData(file));
    };
  }

  const total = result ? result.image.width * result.image.height : 0;

  return (
    <main>
      <label className="pick">
        変更前の画像
        <input type="file" accept="image/*" onChange={pick(setBefore)} />
      </label>
      <label className="pick">
        変更後の画像
        <input type="file" accept="image/*" onChange={pick(setAfter)} />
      </label>
      <label className="threshold">
        しきい値：{threshold}
        <input type="range" min={0} max={64} step={8} value={threshold} onChange={(e) => setThreshold(Number(e.target.value))} />
      </label>
      {before && after && !sameSize && (
        <p className="error" role="alert">
          画像の大きさが違います（{before.width}×{before.height} と {after.width}×{after.height}）
        </p>
      )}
      {result && (
        <>
          <p className="info">
            違う画素：{result.changed.toLocaleString()} 個（全体の {((result.changed / total) * 100).toFixed(2)}%）
          </p>
          <canvas ref={canvasRef} className="result" role="img" aria-label="違う部分をピンクで示した画像" />
        </>
      )}
    </main>
  );
}

body { margin: 0; font-family: "Noto Sans CJK JP", sans-serif; color: #1f2a30; background: #fff; }
main { padding: 16px; max-width: 620px; }
.pick, .threshold { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.info { font-size: 14px; margin: 0 0 8px; }
.error { color: #d85878; font-size: 14px; }
.result { display: block; max-width: 100%; height: auto; border: 1px solid #9aa5ab; }

after-png-t0.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 372, 丸 2088, 黒い点 9, 四角の色 40401, それ以外 0
after-png-t16.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 333, 丸 2088, 黒い点 9, 四角の色 40401, それ以外 0
after-png-t24.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 320, 丸 2088, 黒い点 9, 四角の色 0, それ以外 0
after-png-t64.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 289, 丸 2088, 黒い点 9, 四角の色 0, それ以外 0

before-png-t0.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 0, 丸 0, 黒い点 0, 四角の色 0, それ以外 0

値段の文字: 違う画素 372、差の最小 1、最大 249
丸: 違う画素 2088、差の最小 173、最大 224
黒い点: 違う画素 9、差の最小 253、最大 253
四角の色: 違う画素 40401、差の最小 20、最大 20

after.png と after.jpg: 違う画素 227956 、差の最大 92 、差が 64 を超える画素 33

after-jpg-t0.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 10562, 丸 16375, 黒い点 9, 四角の色 40401, それ以外 160616
after-jpg-t8.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 3068, 丸 3223, 黒い点 9, 四角の色 40399, それ以外 9233
after-jpg-t16.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 1936, 丸 2477, 黒い点 9, 四角の色 40286, それ以外 5815
after-jpg-t24.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 1051, 丸 2335, 黒い点 9, 四角の色 1200, それ以外 3187
after-jpg-t32.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 543, 丸 2268, 黒い点 9, 四角の色 804, それ以外 1386
after-jpg-t48.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 325, 丸 2154, 黒い点 9, 四角の色 16, それ以外 399
after-jpg-t64.png: 600x400 正解と違う画素 0 / 240000, 不透明 True | ピンクの画素 値段の文字 292, 丸 2100, 黒い点 9, 四角の色 4, それ以外 1