Doc
アバター編集UIについてはTwitterのUIがベスト。トリミング範囲の調整がシンプルなのでモバイルユーザーに優しい。 react-avatar-editor で実装可能。アスペクト比は調整できるので実はアバター以外のトリミングにも使える。 npmjs.com/package/react-…
画像クロッパー
インストール
pnpm add react-avatar-editor react-dropzone
pnpm add -D @types/react-avatar-editorインストール
pnpm add react-avatar-editor react-dropzone
pnpm add -D @types/react-avatar-editorimport ImageCropper from '@/app/_components/image-cropper';
export default function ImageCropperDemo() {
return (
<div className="mx-auto max-w-[140px]">
<ImageCropper width={250} aspectRatio={1} />
</div>
);
}
import ImageCropper from '@/app/_components/image-cropper';
export default function ImageCropperDemo() {
return (
<div className="mx-auto max-w-[140px]">
<ImageCropper width={250} aspectRatio={1} />
</div>
);
}
既知のバグ
- Safari で画像をドラッグオーバーした際のイベントが正しく取得できず、そのため色を変更できない。(issue)