Reactで、画像の色数を減らしてポスターのようにする方法

// 0〜255 の値を levels 段階に減らす対応表を作る。
// 0〜255 を levels 個の同じ幅の区間に分け、k 番目の区間の値は k * 255 / (levels - 1) にそろえる
export function makeTable(levels: number): Uint8ClampedArray {
  const table = new Uint8ClampedArray(256);
  for (let v = 0; v < 256; v++) {
    const k = Math.min(levels - 1, Math.floor((v / 255) * levels));
    table[v] = Math.round((k * 255) / (levels - 1));
  }
  return table;
}

// R・G・B をそれぞれ levels 段階に減らした画像を作る。A（不透明度）はそのまま
export function posterize(src: ImageData, levels: number): ImageData {
  const table = makeTable(levels);
  const out = new ImageData(src.width, src.height);
  const a = src.data;
  const b = out.data;
  for (let i = 0; i < a.length; i += 4) {
    b[i] = table[a[i]];
    b[i + 1] = table[a[i + 1]];
    b[i + 2] = table[a[i + 2]];
    b[i + 3] = a[i + 3];
  }
  return out;
}

// 画像の中で使われている色（R・G・B の組み合わせ）の数を数える
export function countColors(img: ImageData): number {
  const colors = new Set<number>();
  const d = img.data;
  for (let i = 0; i < d.length; i += 4) {
    colors.add((d[i] << 16) | (d[i + 1] << 8) | d[i + 2]);
  }
  return colors.size;
}

// 選んだファイルを読み込み、画素の値を取り出す
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);
}

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

export function App() {
  const [src, setSrc] = useState<ImageData | null>(null);
  const [levels, setLevels] = useState(4);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // 画像か段階の数が変わったときだけ、色を減らし直す
  const result = useMemo(() => (src ? posterize(src, levels) : null), [src, levels]);
  const colors = useMemo(() => (result ? countColors(result) : 0), [result]);

  // 色を減らした画像を canvas に描く
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!result || !canvas) return;
    canvas.width = result.width;
    canvas.height = result.height;
    canvas.getContext('2d')?.putImageData(result, 0, 0);
  }, [result]);

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

  // canvas の中身を PNG にして保存する
  function save() {
    canvasRef.current?.toBlob((blob) => {
      if (!blob) return;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `poster-${levels}.png`;
      a.click();
      URL.revokeObjectURL(url);
    }, 'image/png');
  }

  return (
    <main>
      <label className="pick">
        画像を選ぶ
        <input type="file" accept="image/*" onChange={pick} />
      </label>
      <label className="levels">
        1色あたりの段階：{levels}
        <input type="range" min={2} max={8} step={1} value={levels} onChange={(e) => setLevels(Number(e.target.value))} />
      </label>
      {result && (
        <>
          <p className="info">
            使われている色：{colors.toLocaleString()} 色（最大 {(levels ** 3).toLocaleString()} 色）
          </p>
          <canvas ref={canvasRef} className="result" role="img" aria-label="色の数を減らした画像" />
          <button type="button" onClick={save}>
            PNG で保存
          </button>
        </>
      )}
    </main>
  );
}

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

元の画像の色の数: 1021
段階 4 の対応表の値: [0, 85, 170, 255]
canvas-2.png: 正解と違う画素 0 / 240000, 不透明 True, 色の数 7
canvas-3.png: 正解と違う画素 0 / 240000, 不透明 True, 色の数 13
canvas-4.png: 正解と違う画素 0 / 240000, 不透明 True, 色の数 20
canvas-6.png: 正解と違う画素 0 / 240000, 不透明 True, 色の数 29
canvas-8.png: 正解と違う画素 0 / 240000, 不透明 True, 色の数 40
download-4.png と canvas-4.png: 違う画素 0, 差の最大 0

import { useId } from 'react';

type Props = { src: string; levels: number; alt: string; linear?: boolean };

// SVG のフィルターで、表示するときだけ色の段階を減らす（画素の値は取り出さない）
export function SvgPosterize({ src, levels, alt, linear = false }: Props) {
  const id = useId();
  // 段階が 4 なら "0 0.3333333333333333 0.6666666666666666 1"
  const table = Array.from({ length: levels }, (_, k) => String(k / (levels - 1))).join(' ');
  return (
    <>
      <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
        <filter id={id} colorInterpolationFilters={linear ? 'linearRGB' : 'sRGB'}>
          <feComponentTransfer>
            <feFuncR type="discrete" tableValues={table} />
            <feFuncG type="discrete" tableValues={table} />
            <feFuncB type="discrete" tableValues={table} />
          </feComponentTransfer>
        </filter>
      </svg>
      <img src={src} alt={alt} style={{ filter: `url(#${id})` }} />
    </>
  );
}

svg-4-srgb.png: (600, 400) canvas の結果（正解）と違う画素 0 / 240000, 差の最大 0, 色の数 20
svg-2-srgb.png: (600, 400) canvas の結果（正解）と違う画素 0 / 240000, 差の最大 0, 色の数 7
svg-8-srgb.png: (600, 400) canvas の結果（正解）と違う画素 186778 / 240000, 差の最大 1, 色の数 40

canvas-8 の灰色の帯（x と値）: 0:0 74:36 150:73 225:109 300:146 375:182 450:219 526:255
svg-8-srgb の灰色の帯（x と値）: 0:0 74:36 150:72 225:109 300:145 375:182 450:218 526:255

svg-4-srgb-4digits の灰色の帯（x と値）: 0:0 150:84 300:170 450:255

svg-4-linear.png: (600, 400) canvas の結果（正解）と違う画素 231120 / 240000, 差の最大 170, 色の数 17

canvas-4 の灰色の帯（x と値）: 0:0 150:85 300:170 450:255
svg-4-linear の灰色の帯（x と値）: 0:0 321:156 441:213 528:255