Reactで、アップロード前に画像を縮小してプレビューする方法

export type Resized = {
  file: File;
  width: number;
  height: number;
  sourceWidth: number;
  sourceHeight: number;
};

// 長いほうの辺が maxSize 以下になるように縮小し、JPEG の File にして返す
export async function resizeImage(file: File, maxSize: number, quality = 0.8): Promise<Resized> {
  const bitmap = await createImageBitmap(file);
  const { width: sourceWidth, height: sourceHeight } = bitmap;
  // 小さい画像は拡大しない
  const scale = Math.min(1, maxSize / Math.max(sourceWidth, sourceHeight));
  const width = Math.round(sourceWidth * scale);
  const height = Math.round(sourceHeight * scale);

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('canvas が使えません');
  // JPEG は透明を持てないので、先に白で塗っておく
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, width, height);
  ctx.drawImage(bitmap, 0, 0, width, height);
  bitmap.close();

  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/jpeg', quality));
  if (!blob) throw new Error('画像を書き出せませんでした');
  const name = file.name.replace(/\.[^.]+$/, '') + '.jpg';
  return {
    file: new File([blob], name, { type: 'image/jpeg' }),
    width,
    height,
    sourceWidth,
    sourceHeight,
  };
}

--- 3. 小さい画像（800×600）は拡大しない ---
元の画像：800×600、82 KB
送信する画像：800×600、36 KB

import { useEffect, useState, type ChangeEvent, type FormEvent } from 'react';
import { resizeImage, type Resized } from './resizeImage';

const MAX_SIZE = 1280;

// File から表示用の URL を作り、使わなくなったら解放する
function useObjectUrl(file: File | undefined) {
  const [url, setUrl] = useState<string>();
  useEffect(() => {
    if (!file) return;
    const objectUrl = URL.createObjectURL(file);
    setUrl(objectUrl);
    return () => {
      URL.revokeObjectURL(objectUrl);
      setUrl(undefined);
    };
  }, [file]);
  return url;
}

const kb = (bytes: number) => `${Math.round(bytes / 1024).toLocaleString()} KB`;

export function ImageResizeForm() {
  const [original, setOriginal] = useState<File>();
  const [resized, setResized] = useState<Resized>();
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  const previewUrl = useObjectUrl(resized?.file);

  useEffect(() => {
    if (!original) return;
    let ignore = false;
    resizeImage(original, MAX_SIZE)
      .then((result) => {
        if (!ignore) setResized(result);
      })
      .catch(() => {
        if (!ignore) setError('この画像は読み込めませんでした');
      });
    // 別の画像を選び直したら、前の画像の結果は使わない
    return () => {
      ignore = true;
    };
  }, [original]);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setOriginal(e.target.files?.[0]);
    setResized(undefined);
    setError('');
    setMessage('');
  };

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!resized) return;
    const body = new FormData();
    body.append('image', resized.file);
    const res = await fetch('/upload', { method: 'POST', body });
    setMessage(res.ok ? '送信しました' : `送信できませんでした（${res.status}）`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="image">画像を選ぶ</label>
      <input id="image" type="file" accept="image/*" onChange={handleChange} />
      {original && !resized && !error && <p>縮小しています…</p>}
      {error && <p role="alert">{error}</p>}
      {original && resized && previewUrl && (
        <figure>
          <img src={previewUrl} alt="送信する画像のプレビュー" width={resized.width} height={resized.height} />
          <figcaption>
            元の画像：{resized.sourceWidth}×{resized.sourceHeight}、{kb(original.size)}
            <br />
            送信する画像：{resized.width}×{resized.height}、{kb(resized.file.size)}
          </figcaption>
        </figure>
      )}
      <button type="submit" disabled={!resized}>
        送信する
      </button>
      <p role="status">{message}</p>
    </form>
  );
}

--- 1. 4032×3024 の写真を選ぶ ---
元の画像：4032×3024、1,665 KB
送信する画像：1280×960、52 KB
プレビューの img: {"naturalWidth":1280,"naturalHeight":960,"src":"blob:http://localhost:5173/<id>"}
--- 2. 送信する ---
サーバーが受け取ったファイル: {"name":"photo.jpg","type":"image/jpeg","size":52773,"requestBytes":52957}

--- 9. 大きな画像を選んですぐ小さな画像に選び直す ---
ImageResizeForm: {"選んでいる画像":"small.jpg","表示している結果":"元の画像：800×600、82 KB\n送信する画像：800×600、36 KB"}
ignore を立てない版: {"選んでいる画像":"small.jpg","表示している結果":"huge.jpg"}

--- 6. JPEG の品質ごとの大きさ（4032×3024 の写真を 1280×960 にしたとき）---
quality 0.5: 27631 バイト（27 KB）
quality 0.6: 30837 バイト（30 KB）
quality 0.7: 36561 バイト（36 KB）
quality 0.8: 52773 バイト（52 KB）
quality 0.9: 108453 バイト（106 KB）
quality 1: 658346 バイト（643 KB）
元の写真: 1704461 バイト

--- 7. 背景が透明な PNG を JPEG にする ---
白で塗ってから描いた版（resizeImage）: {"size":"600×400","corner":"255,255,255","center":"0,200,233"}
塗らずに描いた版: {"size":"600×400","corner":"0,0,0","center":"0,200,233"}

--- 8. EXIF の Orientation=6 が付いた JPEG（画素は 400×300、左が水色・右がピンク）---
createImageBitmap(file) の大きさ: "300×400"
imageOrientation: "none" を付けたとき: "300×400"
resizeImage の結果（上の端と下の端の色）: {"size":"300×400","top":"0,200,233","bottom":"216,89,119"}

--- 5. 画像ではないファイル（中身が文字の not-image.jpg）---
表示: "この画像は読み込めませんでした"
送信ボタン: "押せない"
createImageBitmap のエラー: "InvalidStateError: The source image could not be decoded."