Reactで、複数の画像を並べて1枚にまとめる方法

export type Layout = 'row' | 'column' | 'grid';

export type CollageOptions = {
  layout: Layout;
  size: number; // 横並びなら高さ、縦並びなら幅、格子なら1マスの一辺（px）
  gap: number; // 画像どうしの間と、外側の余白（px）
  background: string;
  maxSide: number; // 書き出す画像の長い辺の上限（px）
};

type Size = { width: number; height: number };
// 元の画像のどこ（s）を、まとめた画像のどこ（d）に描くか
export type Placement = { sx: number; sy: number; sw: number; sh: number; dx: number; dy: number; dw: number; dh: number };

// 1マスを埋めるように、元の画像の真ん中を切り抜く範囲
function coverCrop(img: Size, cw: number, ch: number) {
  const scale = Math.max(cw / img.width, ch / img.height);
  const sw = cw / scale;
  const sh = ch / scale;
  return { sx: (img.width - sw) / 2, sy: (img.height - sh) / 2, sw, sh };
}

export function layoutCollage(images: Size[], o: CollageOptions): Size & { items: Placement[] } {
  const { size, gap } = o;
  const items: Placement[] = [];
  let width = 0;
  let height = 0;

  if (o.layout === 'row') {
    // 高さをそろえ、幅は元の縦横比のまま
    let x = gap;
    for (const img of images) {
      const dw = Math.round((img.width * size) / img.height);
      items.push({ sx: 0, sy: 0, sw: img.width, sh: img.height, dx: x, dy: gap, dw, dh: size });
      x += dw + gap;
    }
    width = x;
    height = size + gap * 2;
  } else if (o.layout === 'column') {
    // 幅をそろえ、高さは元の縦横比のまま
    let y = gap;
    for (const img of images) {
      const dh = Math.round((img.height * size) / img.width);
      items.push({ sx: 0, sy: 0, sw: img.width, sh: img.height, dx: gap, dy: y, dw: size, dh });
      y += dh + gap;
    }
    width = size + gap * 2;
    height = y;
  } else {
    // 正方形のマスに、はみ出す部分を切り落として入れる
    const cols = Math.ceil(Math.sqrt(images.length));
    const rows = Math.ceil(images.length / cols);
    images.forEach((img, i) => {
      const dx = gap + (i % cols) * (size + gap);
      const dy = gap + Math.floor(i / cols) * (size + gap);
      items.push({ ...coverCrop(img, size, size), dx, dy, dw: size, dh: size });
    });
    width = gap + cols * (size + gap);
    height = gap + rows * (size + gap);
  }

  // 長い辺が上限を超えたら、全体を同じ割合で縮める
  const k = Math.min(1, o.maxSide / Math.max(width, height));
  if (k < 1) {
    for (const it of items) {
      it.dx *= k; it.dy *= k; it.dw *= k; it.dh *= k;
    }
    width = Math.round(width * k);
    height = Math.round(height * k);
  }
  return { width, height, items };
}

65535×832：canvas の大きさ 65535×832、toBlob の結果 Blob 1006579 バイト（246ms）、canvasToBlob では 成功
65536×832：canvas の大きさ 65536×832、toBlob の結果 null（0ms）、canvasToBlob では 失敗「画像を書き出せませんでした」
16384×16384：canvas の大きさ 16384×16384、toBlob の結果 Blob 5012119 バイト（733ms）、canvasToBlob では 成功
16384×16385：canvas の大きさ 16384×16385、toBlob の結果 null（0ms）、canvasToBlob では 失敗「画像を書き出せませんでした」

export function drawCollage(canvas: HTMLCanvasElement, images: ImageBitmap[], o: CollageOptions) {
  const { width, height, items } = layoutCollage(images, o);
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d')!;
  ctx.fillStyle = o.background;
  ctx.fillRect(0, 0, width, height);
  ctx.imageSmoothingQuality = 'high';
  items.forEach((p, i) => ctx.drawImage(images[i], p.sx, p.sy, p.sw, p.sh, p.dx, p.dy, p.dw, p.dh));
}

export function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality?: number): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像を書き出せませんでした'))), type, quality);
  });
}

export function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

import { useEffect, useId, useRef, useState } from 'react';
import { canvasToBlob, downloadBlob, drawCollage, type Layout } from './collage';

type Picked = { name: string; bitmap: ImageBitmap };

export function ImageCollage() {
  const [picked, setPicked] = useState<Picked[]>([]); // 選んだ画像（選んだ順）
  const [order, setOrder] = useState<number[]>([]); // 並べる順（picked の番号）
  const [layout, setLayout] = useState<Layout>('row');
  const [gap, setGap] = useState(16);
  const [background, setBackground] = useState('#ffffff');
  const [message, setMessage] = useState('');
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const id = useId();

  // 選び直したり、画面から取り除かれたりしたら、前の ImageBitmap を解放する
  useEffect(() => () => picked.forEach((p) => p.bitmap.close()), [picked]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || order.length === 0) return;
    const size = layout === 'grid' ? 600 : 800;
    const bitmaps = order.map((i) => picked[i].bitmap);
    drawCollage(canvas, bitmaps, { layout, size, gap, background, maxSide: 4096 });
  }, [picked, order, layout, gap, background]);

  async function handleFiles(list: FileList | null) {
    const files = Array.from(list ?? []).filter((f) => f.type.startsWith('image/'));
    if (files.length === 0) return;
    // Promise.all の結果は、読み込みが終わった順ではなく、渡した順に並ぶ
    const bitmaps = await Promise.all(files.map((f) => createImageBitmap(f)));
    setPicked(bitmaps.map((bitmap, i) => ({ name: files[i].name, bitmap })));
    setOrder(files.map((_, i) => i));
    setMessage('');
  }

  // 並びの pos 番目を、1つ前へ移す
  function moveForward(pos: number) {
    setOrder((prev) => {
      const next = [...prev];
      [next[pos - 1], next[pos]] = [next[pos], next[pos - 1]];
      return next;
    });
  }

  async function save() {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const blob = await canvasToBlob(canvas, 'image/png');
    downloadBlob(blob, 'collage.png');
    setMessage(`collage.png（${canvas.width}×${canvas.height}）を保存しました`);
  }

  return (
    <div className="collage">
      <p>
        <label htmlFor={`${id}-files`}>画像（複数選べます）</label>
        <input id={`${id}-files`} type="file" accept="image/*" multiple onChange={(e) => handleFiles(e.target.files)} />
      </p>
      {order.length > 0 && (
        <ol className="order">
          {order.map((i, pos) => (
            <li key={i}>
              {picked[i].name}
              {pos > 0 && (
                <button type="button" onClick={() => moveForward(pos)} aria-label={`${picked[i].name} を前へ`}>
                  ↑
                </button>
              )}
            </li>
          ))}
        </ol>
      )}
      <p className="row">
        <label>
          並べ方
          <select value={layout} onChange={(e) => setLayout(e.target.value as Layout)}>
            <option value="row">横に並べる</option>
            <option value="column">縦に並べる</option>
            <option value="grid">格子に並べる</option>
          </select>
        </label>
        <label>
          すき間
          <input type="number" min={0} max={80} value={gap} onChange={(e) => setGap(Number(e.target.value) || 0)} />
        </label>
        <label>
          背景
          <input type="color" value={background} onChange={(e) => setBackground(e.target.value)} />
        </label>
      </p>
      {order.length > 0 && <canvas ref={canvasRef} aria-label="まとめた画像" />}
      <p>
        <button type="button" onClick={save} disabled={order.length === 0}>PNGで保存</button>
      </p>
      <p className="message" aria-live="polite">{message}</p>
    </div>
  );
}

終わった順：2-portrait.png → 3-square.png → big.png（6000×4000）
Promise.all の結果の順：6000×4000 → 600×900 → 800×800

// images が変わるたびに、前の配列の ImageBitmap を解放する
useEffect(() => () => images.forEach((bm) => bm.close()), [images]);

// 1枚目と2枚目を入れ替える（同じ ImageBitmap を入れた、新しい配列になる）
function swap() {
  setImages((prev) => [prev[1], prev[0], ...prev.slice(2)]);
}

InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image source is detached