Reactで、画像をドラッグして切り抜く方法

import { useRef, useState } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

// 切り抜く範囲。画像の元の大きさ（naturalWidth / naturalHeight）での px で持つ
export type Crop = { x: number; y: number; width: number; height: number };
type Point = { x: number; y: number };
type Handle = 'nw' | 'ne' | 'sw' | 'se';

type Drag =
  | { mode: 'move'; start: Point; crop: Crop }
  // 角のドラッグと、範囲の外から新しく囲むドラッグ。anchor は動かない側の角
  | { mode: 'resize'; anchor: Point; offset: Point; before: Crop };

type Props = {
  src: string;
  crop: Crop | null;
  onChange: (crop: Crop) => void;
  minSize?: number;
};

const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);

// 2つの点を対角にする長方形（どちら向きにドラッグしても幅と高さが正になる）
function rectFrom(a: Point, b: Point): Crop {
  return {
    x: Math.round(Math.min(a.x, b.x)),
    y: Math.round(Math.min(a.y, b.y)),
    width: Math.round(Math.abs(a.x - b.x)),
    height: Math.round(Math.abs(a.y - b.y)),
  };
}

export function ImageCropper({ src, crop, onChange, minSize = 20 }: Props) {
  const imgRef = useRef<HTMLImageElement>(null);
  const drag = useRef<Drag | null>(null);
  const [size, setSize] = useState<{ width: number; height: number } | null>(null);

  // 画面上の座標を、画像の元の大きさでの座標に直す
  function toImagePoint(e: PointerEvent, img: HTMLImageElement): Point {
    const r = img.getBoundingClientRect();
    return {
      x: ((e.clientX - r.left) * img.naturalWidth) / r.width,
      y: ((e.clientY - r.top) * img.naturalHeight) / r.height,
    };
  }

  function handleLoad() {
    const img = imgRef.current!;
    const { naturalWidth: w, naturalHeight: h } = img;
    setSize({ width: w, height: h });
    // 最初は、中央の 80% を囲んでおく
    onChange(rectFrom({ x: w * 0.1, y: h * 0.1 }, { x: w * 0.9, y: h * 0.9 }));
  }

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    const img = imgRef.current;
    if (!img || !crop || e.button !== 0) return;
    const p = toImagePoint(e, img);
    const target = (e.target as HTMLElement).dataset.handle as Handle | 'move' | undefined;
    if (target === 'move') {
      drag.current = { mode: 'move', start: p, crop };
    } else if (target) {
      const left = crop.x, top = crop.y, right = crop.x + crop.width, bottom = crop.y + crop.height;
      const corner = { x: target.endsWith('w') ? left : right, y: target.startsWith('n') ? top : bottom };
      const anchor = { x: target.endsWith('w') ? right : left, y: target.startsWith('n') ? bottom : top };
      // 角の中心からずれた所をつかんでも、角が指の位置へ飛ばないようにずれを覚えておく
      drag.current = { mode: 'resize', anchor, offset: { x: corner.x - p.x, y: corner.y - p.y }, before: crop };
    } else {
      drag.current = { mode: 'resize', anchor: p, offset: { x: 0, y: 0 }, before: crop };
    }
    // ポインターが枠の外へ出ても、離すまでこの要素にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    const img = imgRef.current;
    if (!d || !img) return;
    const p = toImagePoint(e, img);
    const w = img.naturalWidth, h = img.naturalHeight;
    if (d.mode === 'move') {
      onChange({
        ...d.crop,
        x: Math.round(clamp(d.crop.x + p.x - d.start.x, 0, w - d.crop.width)),
        y: Math.round(clamp(d.crop.y + p.y - d.start.y, 0, h - d.crop.height)),
      });
    } else {
      const q = { x: clamp(p.x + d.offset.x, 0, w), y: clamp(p.y + d.offset.y, 0, h) };
      onChange(rectFrom(d.anchor, q));
    }
  }

  function handlePointerUp() {
    const d = drag.current;
    drag.current = null;
    // クリックしただけのときなど、小さすぎる範囲になったら元に戻す
    if (d?.mode === 'resize' && crop && (crop.width < minSize || crop.height < minSize)) {
      onChange(d.before);
    }
  }

  // 矢印キーで範囲を 10px ずつ動かす
  function handleKeyDown(e: KeyboardEvent) {
    if (!crop || !size) return;
    const step = { ArrowLeft: [-10, 0], ArrowRight: [10, 0], ArrowUp: [0, -10], ArrowDown: [0, 10] }[e.key];
    if (!step) return;
    e.preventDefault();
    onChange({
      ...crop,
      x: clamp(crop.x + step[0], 0, size.width - crop.width),
      y: clamp(crop.y + step[1], 0, size.height - crop.height),
    });
  }

  const pct = (n: number, total: number) => `${(n / total) * 100}%`;

  return (
    <div
      className="cropper"
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      onPointerCancel={handlePointerUp}
    >
      <img ref={imgRef} src={src} alt="切り抜く画像" draggable={false} onLoad={handleLoad} />
      {size && crop && (
        <div
          className="crop-box"
          data-handle="move"
          tabIndex={0}
          role="group"
          aria-label={`切り抜く範囲 ${crop.width}×${crop.height}px（矢印キーで移動）`}
          onKeyDown={handleKeyDown}
          style={{
            left: pct(crop.x, size.width),
            top: pct(crop.y, size.height),
            width: pct(crop.width, size.width),
            height: pct(crop.height, size.height),
          }}
        >
          {(['nw', 'ne', 'sw', 'se'] as const).map((h) => (
            <span key={h} className={`crop-handle ${h}`} data-handle={h} />
          ))}
        </div>
      )}
    </div>
  );
}

.cropper {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  /* タッチでドラッグしたときに、ページがスクロールしないようにする */
  touch-action: none;
  user-select: none;
}
.cropper img { display: block; max-width: 100%; }

.crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  /* 範囲の外側を暗くする */
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.5);
  cursor: move;
}
.crop-box:focus-visible { outline: 3px solid #00c8e8; }

.crop-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #067a98;
  box-sizing: border-box;
}
.crop-handle.nw { left: -2px; top: -2px; cursor: nwse-resize; }
.crop-handle.ne { right: -2px; top: -2px; cursor: nesw-resize; }
.crop-handle.sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.crop-handle.se { right: -2px; bottom: -2px; cursor: nwse-resize; }

画面上の画像の大きさ: 600×400
範囲：x 120, y 80, 960×640px
範囲の中を、元の画像で右へ100px・下へ60px分ドラッグ: 範囲：x 220, y 140, 960×640px
範囲の中を、右へ500px分（画像の外まで）ドラッグ: 範囲：x 240, y 140, 960×640px
右下の角を、画像の右下の外までドラッグ: 範囲：x 120, y 80, 1080×720px
左上の角を、元の画像の (400, 300) あたりへドラッグ: 範囲：x 384, y 284, 816×516px
左上の角を、右下の角を越えて (1150, 780) あたりへドラッグ: 範囲：x 1134, y 764, 66×36px
範囲の外の (60, 760) から、左上の (20, 20) へドラッグ: 範囲：x 20, y 20, 40×740px
範囲の外の (1180, 20) をクリックしただけ: 範囲：x 20, y 20, 40×740px
範囲の外の (1100, 700) から 10px×5px だけドラッグ: 範囲：x 20, y 20, 40×740px

あり: 右下の角を、画像の右の外を通って右下の外までドラッグして離す: 範囲：x 120, y 80, 1080×720px / 押さずに画像の中央へ戻る: 範囲：x 120, y 80, 1080×720px
なし: 右下の角を、画像の右の外を通って右下の外までドラッグして離す: 範囲：x 120, y 80, 1080×557px / 押さずに画像の中央へ戻る: 範囲：x 120, y 80, 496×336px

draggable="false" あり: 範囲の外の (60, 760) から (400, 400) へドラッグ中: 範囲：x 60, y 400, 340×360px / 起きたイベント: なし
draggable を外した: 範囲の外の (60, 760) から (400, 400) へドラッグ中: 範囲：x 60, y 724, 34×36px / 起きたイベント: dragstart, pointercancel

import type { Crop } from './ImageCropper';

// src の画像から crop の範囲を切り出し、PNG の Blob にする
export async function cropImage(src: string, crop: Crop): Promise<Blob> {
  const img = new Image();
  // 別のオリジンの画像でも canvas から書き出せるように、CORS で読み込む
  img.crossOrigin = 'anonymous';
  img.src = src;
  await img.decode();

  const canvas = document.createElement('canvas');
  canvas.width = crop.width;
  canvas.height = crop.height;
  const ctx = canvas.getContext('2d')!;
  // 元の画像の (x, y, width, height) の範囲を、canvas の (0, 0) から同じ大きさで描く
  ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);

  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像を書き出せませんでした'))), 'image/png');
  });
}

import { useEffect, useState } from 'react';
import type { ChangeEvent } from 'react';
import { ImageCropper } from './ImageCropper';
import type { Crop } from './ImageCropper';
import { cropImage } from './cropImage';

export function App() {
  const [src, setSrc] = useState<string | null>(null);
  const [crop, setCrop] = useState<Crop | null>(null);
  const [result, setResult] = useState<{ url: string; width: number; height: number } | null>(null);

  // 選んだファイルの URL は、画像を選び直したときと、画面を閉じるときに解放する
  useEffect(() => () => { if (src) URL.revokeObjectURL(src); }, [src]);
  useEffect(() => () => { if (result) URL.revokeObjectURL(result.url); }, [result]);

  function handleFile(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setCrop(null);
    setResult(null);
    setSrc(URL.createObjectURL(file));
  }

  async function handleCrop() {
    if (!src || !crop) return;
    const blob = await cropImage(src, crop);
    setResult({ url: URL.createObjectURL(blob), width: crop.width, height: crop.height });
  }

  return (
    <main>
      <input type="file" accept="image/*" aria-label="画像を選ぶ" onChange={handleFile} />
      {src && (
        <>
          <ImageCropper src={src} crop={crop} onChange={setCrop} />
          <p className="crop-info">
            {crop ? `範囲：x ${crop.x}, y ${crop.y}, ${crop.width}×${crop.height}px` : '読み込み中'}
          </p>
          <button type="button" onClick={handleCrop} disabled={!crop}>切り抜く</button>
        </>
      )}
      {result && (
        <figure>
          <img className="result" src={result.url} alt="切り抜いた画像" />
          <figcaption>切り抜いた画像：{result.width}×{result.height}px</figcaption>
        </figure>
      )}
    </main>
  );
}

範囲：x 484, y 234, 556×466px
切り抜いた画像：556×466px
書き出した画像: image/png 556×466。元の画像の同じ範囲と色が違う画素: 0 / 259096