react-easy-cropでTwitter風の画像トリミングを実装してみた

概要 Twitterのヘッダー画像トリミング のようなものを実装しました。 画像ファイルをアップロードしてモーダル上で画像のトリミング領域を指定し、「OK」ボタンを押下すると切り取った結果が画面に表示されます。 トリミングのルール トリミングサイズは固定 画像側を動かしてトリミング箇所を指定 画像のサイズ変更可 画像の回転は不可 画像の範囲内でのみトリミングが可能 ライブラリ 今回は画像側を動かしてトリミングを行うためreact-easy-cropを採用しました。 react-image-crop https://www.npmjs.com/package/react-image-crop トリミング領域側を動かす react-easy-crop https://www.npmjs.com/package/react-easy-crop 画像側を動かす 実装結果 画像ファイルをアップロード