Reactで、画像の明るさの分布をヒストグラムで表示する方法

export type Histogram = {
  bins: Uint32Array; // 明るさ 0〜255 ごとの画素の数
  count: number; // 数えた画素の数（透明な画素は除く）
  mean: number; // 明るさの平均
};

// 赤・緑・青の値に、目の感じ方に合わせた重みをかけて足す（0〜255）
export function luma(r: number, g: number, b: number): number {
  return Math.round(0.2126 * r + 0.7152 * g + 0.0722 * b);
}

export function countBrightness(data: Uint8ClampedArray): Histogram {
  const bins = new Uint32Array(256);
  let count = 0;
  let sum = 0;
  for (let i = 0; i < data.length; i += 4) {
    if (data[i + 3] === 0) continue; // 透明な画素は数えない
    const y = luma(data[i], data[i + 1], data[i + 2]);
    bins[y]++;
    sum += y;
    count++;
  }
  return { bins, count, mean: count ? sum / count : 0 };
}

// 長い辺が maxSide 以下になるように縮めて描き、画素の値を読む
export async function readPixels(file: Blob, maxSide = 512): Promise<ImageData> {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height));
  const width = Math.max(1, Math.round(bitmap.width * scale));
  const height = Math.max(1, Math.round(bitmap.height * scale));
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(bitmap, 0, 0, width, height);
  bitmap.close();
  return ctx.getImageData(0, 0, width, height);
}

import { useEffect, useId, useState } from 'react';
import { countBrightness, readPixels, type Histogram } from './histogram';

const W = 256; // 横は明るさ 0〜255 に1本ずつ
const H = 100;

function barsPath(bins: Uint32Array, log: boolean): string {
  const f = log ? Math.log1p : (v: number) => v;
  const max = Math.max(...Array.from(bins, f), 1);
  let d = '';
  bins.forEach((v, i) => {
    const h = (f(v) / max) * H;
    if (h > 0) d += `M${i} ${H}h1v${-h}h-1z`;
  });
  return d;
}

const percent = (n: number, total: number) => `${((n / total) * 100).toFixed(1)}%`;

export function ImageHistogram() {
  const [file, setFile] = useState<File | null>(null);
  const [url, setUrl] = useState('');
  const [hist, setHist] = useState<Histogram | null>(null);
  const [log, setLog] = useState(false);
  const id = useId();

  useEffect(() => {
    if (!file) return;
    const objectUrl = URL.createObjectURL(file);
    setUrl(objectUrl);
    let ignore = false; // 読み終わる前に別の画像を選んだら、古い結果は捨てる
    readPixels(file).then((img) => {
      if (!ignore) setHist(countBrightness(img.data));
    });
    return () => {
      ignore = true;
      URL.revokeObjectURL(objectUrl);
    };
  }, [file]);

  return (
    <div className="histogram">
      <p>
        <label htmlFor={`${id}-file`}>画像</label>
        <input id={`${id}-file`} type="file" accept="image/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      </p>
      {url && <img src={url} alt="選んだ画像" />}
      {hist && (
        <>
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" role="img"
            aria-label={`明るさの分布。平均 ${Math.round(hist.mean)}`}>
            <path d={barsPath(hist.bins, log)} fill="#00c8e8" />
          </svg>
          <p className="axis"><span>0（黒）</span><span>255（白）</span></p>
          <p>
            <label>
              <input type="checkbox" checked={log} onChange={(e) => setLog(e.target.checked)} />
              縦軸を対数にする
            </label>
          </p>
          <p className="stats">
            平均 {Math.round(hist.mean)}／真っ黒（0）{percent(hist.bins[0], hist.count)}／真っ白（255）{percent(hist.bins[255], hist.count)}
          </p>
        </>
      )}
    </div>
  );
}