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
- react-avatar-editor
いろいろな種類がありますが、react-image-cropかreact-easy-cropを選んでおくのが無難そうです。また、この2つのライブラリはcropの仕方が異なるので用途によってどちらかを選ぶのがよさそうです。
cropの方法
どのように画像をcropするのかがreact-image-cropとreact-easy-cropで異なっています。
画像を固定してcrop領域を動かす
react-image-cropはこの方式です。画像をcropするのに多くの人がこの方法を連想すると思います。
crop領域を固定し画像を動かす
react-easy-cropはこの方式です。crop領域が固定されているので必ず丸く切り抜くとか、比率を1:1に固定したいときとかの場合はこちらのやり方の方がユーザーにとってわかりやすそうです。
cropした画像をつかう
これらの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の方がおすすめです。