Reactで、画像の明るさとコントラストを調整して保存する方法

// 明るさとコントラスト（どちらも % で、100 が元のまま）
export type Adjust = { brightness: number; contrast: number };

export const initialAdjust: Adjust = { brightness: 100, contrast: 100 };

// CSS の filter と canvas の ctx.filter の両方に使える文字列にする。左から順にかかる
export function toFilter({ brightness, contrast }: Adjust): string {
  return `brightness(${brightness}%) contrast(${contrast}%)`;
}

// 元の画像と同じ大きさの canvas に、フィルターをかけて描き、PNG の Blob にする
export function exportAdjusted(img: HTMLImageElement, adjust: Adjust): Promise<Blob> {
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext('2d');
  if (!ctx) return Promise.reject(new Error('canvas が使えません'));
  ctx.filter = toFilter(adjust); // drawImage より前に指定する
  ctx.drawImage(img, 0, 0);
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('PNG にできません'))), 'image/png');
  });
}

import { useEffect, useRef, useState } from 'react';
import type { ChangeEvent } from 'react';
import { exportAdjusted, initialAdjust, toFilter } from './adjust';
import type { Adjust } from './adjust';

export function App() {
  const [url, setUrl] = useState<string | null>(null);
  const [adjust, setAdjust] = useState<Adjust>(initialAdjust);
  const imgRef = useRef<HTMLImageElement>(null);

  // 前の画像の URL は、次の画像に替えたときに解放する
  useEffect(() => {
    if (!url) return;
    return () => URL.revokeObjectURL(url);
  }, [url]);

  function pick(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setUrl(URL.createObjectURL(file));
    setAdjust(initialAdjust);
  }

  function change(key: keyof Adjust) {
    return (e: ChangeEvent<HTMLInputElement>) => setAdjust({ ...adjust, [key]: Number(e.target.value) });
  }

  async function save() {
    const img = imgRef.current;
    if (!img) return;
    const blob = await exportAdjusted(img, adjust);
    const href = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = href;
    a.download = 'adjusted.png';
    a.click();
    URL.revokeObjectURL(href);
  }

  return (
    <main>
      <label className="pick">
        画像を選ぶ
        <input type="file" accept="image/*" onChange={pick} />
      </label>
      {url && (
        <>
          <label className="slider">
            <span>明るさ：{adjust.brightness}%</span>
            <input type="range" min={0} max={200} value={adjust.brightness} onChange={change('brightness')} />
          </label>
          <label className="slider">
            <span>コントラスト：{adjust.contrast}%</span>
            <input type="range" min={0} max={200} value={adjust.contrast} onChange={change('contrast')} />
          </label>
          {/* 画面では CSS の filter で見た目だけを変える */}
          <img ref={imgRef} src={url} alt="調整中の画像" className="preview" style={{ filter: toFilter(adjust) }} />
          <div className="buttons">
            <button type="button" onClick={() => setAdjust(initialAdjust)}>
              元に戻す
            </button>
            <button type="button" onClick={save}>
              PNG で保存
            </button>
          </div>
        </>
      )}
    </main>
  );
}

body { margin: 0; font-family: "Noto Sans CJK JP", sans-serif; color: #1f2a30; background: #fff; }
main { padding: 16px; max-width: 620px; }
.pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.slider { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 14px; }
.slider input { width: 100%; max-width: 360px; }
.preview { display: block; max-width: 100%; height: auto; margin: 0 0 10px; }
.buttons { display: flex; gap: 8px; }
button { font: inherit; font-size: 14px; padding: 6px 14px; }

download-130-100 の灰色の帯（元の値→結果）: 0→0 64→83 128→166 192→249 255→255
download-70-100 の灰色の帯（元の値→結果）: 0→0 64→44 128→89 192→134 255→178
download-100-150 の灰色の帯（元の値→結果）: 0→0 64→32 128→128 192→224 255→255
download-100-50 の灰色の帯（元の値→結果）: 0→63 64→95 128→127 192→159 255→191

download-130-100.png: (600, 400) 式と違う画素 183594 / 240000, 差の最大 1
download-70-140.png: (600, 400) 式と違う画素 230199 / 240000, 差の最大 2
preview-70-140.png と download-70-140.png: 違う画素 230199, 差の最大 2

download-70-140 の灰色の帯（元の値→結果）: 0→0 64→10 128→73 192→136 255→198
swapped-70-140 の灰色の帯（元の値→結果）: 0→0 64→26 128→89 192→151 255→178
swapped-70-140.png と download-70-140.png: 違う画素 236320, 差の最大 20