本文へ移動

§09-22Forms

ファイルクロップ / 画像編集

アップロードした画像をその場で切り抜く。

アバターやサムネイルの表示枠に合わせて、別アプリを使わず構図を調整できる。固定比率の画像が必要な場面で使う。

実装のポイント

表示用の拡大率と位置から元画像上の切り抜き矩形を逆算し、canvas の drawImage で書き出す。ドラッグでの位置調整とアスペクト比固定をセットで用意する。

特徴
  • 状態管理
デモで使っているもの
  • shadcn/ui
  • lucide-react
  • SVG
  • Pointer Events