cropライブラリ

Reactで画像のcropをするライブラリはそれなりに存在しており、npmのトレンド等を見ると以下が候補になります。

react-image-crop
- https://github.com/DominicTobias/react-image-crop
- npmでのダウンロード、Githubのスター数が一番多く更新も頻繁に行われている
react-easy-crop
- https://github.com/ValentinH/react-easy-crop
- 2021年ころからユーザーが伸びており、更新も頻繁に行われている
他
- react-cropper
  - https://github.com/react-cropper/react-cropper
- react-avatar-editor
  - https://github.com/mosch/react-avatar-editor

いろいろな種類がありますが、react-image-cropかreact-easy-cropを選んでおくのが無難そうです。また、この2つのライブラリはcropの仕方が異なるので用途によってどちらかを選ぶのがよさそうです。

cropの方法

どのように画像をcropするのかがreact-image-cropとreact-easy-cropで異なっています。

react-image-cropはこの方式です。画像をcropするのに多くの人がこの方法を連想すると思います。

react-easy-cropはこの方式です。crop領域が固定されているので必ず丸く切り抜くとか、比率を1:1に固定したいときとかの場合はこちらのやり方の方がユーザーにとってわかりやすそうです。

これらのcripライブラリでは実際にcripした領域を取り出すといった機能は提供されていません。なので、自前でcanvasを作ってそこから画像にする必要があります。
各ライブラリにはサンプルコードがあり、それを参考にするのが最も簡単です。
reac-image-crop
https://github.com/DominicTobias/react-image-crop/blob/11.0.1/src/demo/canvasPreview.ts
react-easy-crop
https://github.com/ValentinH/react-easy-crop/blob/v5.0.4/docs/src/components/Demo/cropImage.ts

ライブラリ特有の部分もありますが、どちらのコードも同じことをしています。
react-easy-cropのコードの方がいろいろな用途に対応しやすいように書かれているため、参考にするならreact-eacy-cropの方がおすすめです。