Reactで、画像から代表的な色を取り出す方法

export type RGB = { r: number; g: number; b: number };
export type Swatch = { color: RGB; ratio: number };
export type ImageColors = { dominant: RGB; average: RGB; palette: Swatch[] };

type Options = {
  size?: number; // 縮めたときの長い辺（px）
  levels?: number; // R・G・B をそれぞれ何段階にまとめて数えるか
  count?: number; // palette に返す色の数
};

// 画像を長い辺が size px 以下になるように縮めて描き、色を数える
export function getImageColors(
  img: HTMLImageElement,
  { size = 64, levels = 4, count = 5 }: Options = {},
): ImageColors {
  const scale = Math.min(1, size / Math.max(img.naturalWidth, img.naturalHeight));
  const w = Math.max(1, Math.round(img.naturalWidth * scale));
  const h = Math.max(1, Math.round(img.naturalHeight * scale));
  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(img, 0, 0, w, h);
  // 別のオリジンの画像を CORS なしで描いたあとは、ここで SecurityError になる
  const { data } = ctx.getImageData(0, 0, w, h);

  // R・G・B をそれぞれ levels 段階にまとめ、levels³ 個の箱で数える。箱ごとに元の色の合計も持つ
  const step = (v: number) => Math.floor((v * levels) / 256); // 0〜255 → 0〜levels-1
  const bins = new Map<number, { n: number; r: number; g: number; b: number }>();
  let n = 0, r = 0, g = 0, b = 0;
  for (let i = 0; i < data.length; i += 4) {
    if (data[i + 3] < 128) continue; // 透明に近いピクセルは数えない
    const pr = data[i], pg = data[i + 1], pb = data[i + 2];
    const key = (step(pr) * levels + step(pg)) * levels + step(pb);
    const bin = bins.get(key) ?? { n: 0, r: 0, g: 0, b: 0 };
    bin.n++; bin.r += pr; bin.g += pg; bin.b += pb;
    bins.set(key, bin);
    n++; r += pr; g += pg; b += pb;
  }
  if (n === 0) throw new Error('色のあるピクセルがありません（全体が透明です）');

  const mean = (s: { n: number; r: number; g: number; b: number }): RGB => ({
    r: Math.round(s.r / s.n), g: Math.round(s.g / s.n), b: Math.round(s.b / s.n),
  });
  const palette = [...bins.values()]
    .sort((x, y) => y.n - x.n)
    .slice(0, count)
    .map((bin) => ({ color: mean(bin), ratio: bin.n / n }));
  return { dominant: palette[0].color, average: mean({ n, r, g, b }), palette };
}

import { useEffect, useState } from 'react';
import { getImageColors, type ImageColors } from './imageColors';

type Result = { src: string; colors: ImageColors } | { src: string; error: string };
export type ImageColorsState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'done'; colors: ImageColors }
  | { status: 'error'; error: string };

export function useImageColors(src: string | null): ImageColorsState {
  const [result, setResult] = useState<Result | null>(null);

  useEffect(() => {
    if (!src) return;
    let ignore = false;
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 別のオリジンの画像は CORS で読み込む
    img.src = src;
    img
      .decode()
      .then(() => {
        if (ignore) return;
        try {
          setResult({ src, colors: getImageColors(img) });
        } catch (e) {
          setResult({ src, error: e instanceof Error ? `${e.name}: ${e.message}` : String(e) });
        }
      })
      .catch((e: unknown) => {
        if (!ignore) setResult({ src, error: `画像を読み込めません（${e instanceof Error ? e.name : e}）` });
      });
    return () => {
      ignore = true; // 結果が届く前に src が変わったら、古い結果は捨てる
    };
  }, [src]);

  if (!src) return { status: 'idle' };
  if (result?.src !== src) return { status: 'loading' };
  return 'colors' in result ? { status: 'done', colors: result.colors } : { status: 'error', error: result.error };
}

export const toHex = ({ r, g, b }: RGB) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

// WCAG の相対輝度とコントラスト比で、背景の上で読みやすい文字の色（黒か白）を選ぶ
function luminance({ r, g, b }: RGB) {
  const lin = (v: number) => {
    const c = v / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
export function readableTextColor(bg: RGB) {
  const l = luminance(bg);
  const withBlack = (l + 0.05) / 0.05;
  const withWhite = 1.05 / (l + 0.05);
  return withBlack >= withWhite ? '#000000' : '#ffffff';
}

import { useEffect, useState } from 'react';
import { readableTextColor, toHex } from './imageColors';
import { useImageColors } from './useImageColors';

export function ColorCard({ samples }: { samples: { label: string; src: string }[] }) {
  const [src, setSrc] = useState<string | null>(samples[0]?.src ?? null);
  const [fileUrl, setFileUrl] = useState<string | null>(null);
  const state = useImageColors(src);

  // 選んだファイルの blob URL は、別の画像に替わったら解放する
  useEffect(() => {
    if (!fileUrl) return;
    return () => URL.revokeObjectURL(fileUrl);
  }, [fileUrl]);

  const choose = (next: string, isFile = false) => {
    setFileUrl(isFile ? next : null);
    setSrc(next);
  };

  const bg = state.status === 'done' ? state.colors.dominant : null;
  return (
    <div className="color-card">
      <div className="pickers">
        {samples.map((s) => (
          <button key={s.src} type="button" aria-pressed={src === s.src} onClick={() => choose(s.src)}>
            {s.label}
          </button>
        ))}
        <input
          type="file"
          accept="image/*"
          aria-label="画像ファイルを選ぶ"
          onChange={(e) => {
            const file = e.target.files?.[0];
            if (file) choose(URL.createObjectURL(file), true);
          }}
        />
      </div>

      <figure
        className="card"
        style={bg ? { background: toHex(bg), color: readableTextColor(bg) } : undefined}
      >
        {src && <img src={src} alt="選んだ画像" crossOrigin="anonymous" />}
        <figcaption role="status">
          {state.status === 'loading' && '色を調べています…'}
          {state.status === 'error' && state.error}
          {state.status === 'done' && `代表色 ${toHex(state.colors.dominant)}（平均色 ${toHex(state.colors.average)}）`}
        </figcaption>
      </figure>

      {state.status === 'done' && (
        <ul className="palette" aria-label="多い順の色">
          {state.colors.palette.map(({ color, ratio }) => (
            <li key={toHex(color)}>
              <span className="chip" style={{ background: toHex(color) }} />
              {toHex(color)} {Math.round(ratio * 100)}%
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}