§09-22Forms
ファイルクロップ / 画像編集
アップロードした画像をその場で切り抜く。
アバターやサムネイルの表示枠に合わせて、別アプリを使わず構図を調整できる。固定比率の画像が必要な場面で使う。
実装のポイント
表示用の拡大率と位置から元画像上の切り抜き矩形を逆算し、canvas の drawImage で書き出す。ドラッグでの位置調整とアスペクト比固定をセットで用意する。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react
- SVG
- Pointer Events