画像トリミング機能は、ビューアソフト等に見られる代表的な機能のひとつであるが、Webアプリに実装しなければならないシーンは滅多に遭遇しない。一方でサムネイルの生成であれば、サーバサイドで一定サイズにトリミングすることを考えられるが、WebアプリのGUIツールとなると、なかなか骨が折れそうな実装になりそうだ。スクラッチ開発など非効率が過ぎる。
とはいえ、件の機能要件が盛り込まれないとも限らないわけで、その準備はしておきたい。
このエントリーでは、画像トリミングツールを提供するJSライブラリ「react-image-crop」を紹介したい。
react-image-crop について
react-image-cropは、画像ビューアソフトやデザインツールに見られるGUIトリミング機能を実装するReactコンポーネントだ。マウスによる操作で切り抜きたい範囲を選択することで、新たな画像を描画することができる。
https://github.com/DominicTobias/react-image-crop
特徴
- レスポンシブ対応
- タッチイベント対応
- トリミングモードの切り替え（任意/アスペクト比）
- キーボードイベント対応
- 他ライブラリに依存しない
インストール
$ npm i react-image-crop --save
# or
$ yarn add react-image-crop設置
import ReactCrop from 'react-image-crop';設定
| props name | type | default | hint |
|---|---|---|---|
| src（必須） | string | 画像ファイルを指定 | |
| onChange（必須） | Function | チェンジイベントに応じて発生するコールバック | |
| crop（必須） | Object | トリミングパラメータを定義 | |
| minWidth | number | 0 | トリミング最小幅 |
| minHeight | number | 0 | トリミング最小高さ |
| maxWidth | number | トリミング最大幅 | |
| maxHeight | number | トリミング最大高さ | |
| keepSelection | bool | false | 選択領域外のクリックで、選択解除するか否か |
| disabled | bool | false | 非活性 |
| locked | bool | false | トリミング範囲、サイズ変更の無効化 |
| className | string | <ReactCrop />にclass名を付与する | |
| style | Object | 梱包要素のインラインスタイルオブジェクト | |
| imageStyle | Object | 画像要素のインラインスタイルオブジェクト | |
| onComplete | Function | () => {} | トリミング範囲のサイズ変更、ドラッグの完了に応じて発生するコールバック |
| onImageLoaded | Function | () => {} | 画像読み込みに応じて発生するコールバック |
| onImageError | Function | () => {} | 画像読み込みエラーに応じて発生するコールバック |
| onDragStart | Function | () => {} | ドラッグ、サイズ変更開始に応じて発生するコールバック |
| onDragEnd | Function | () => {} | ドラッグ、サイズ変更後に発生するコールバック |
| crossorigin | Function | 画像にcrossorigin属性を付与 | |
| renderSelectionAddon | Function | トリミング範囲にカスタム要素をレンダリング | |
| renderComponent | Function | 画像の代わりにカスタム要素をレンダリング | |
| ruleOfThirds | bool | false | トリミング範囲に縦横三等分の線を表示 |
| circularCrop | bool | false | トリミング範囲を円で表示 |
デモンストレーション
公式が用意したソースコードをオンラインエディタ越しにご覧いただこう。
まとめ
画像トリミングツールを提供するJSライブラリ「react-image-crop」の紹介だった。
デモンストレーションで示したとおりビューアソフトやデザインツールで見られる画像トリミング機能が実現できるものと認識してもらえたと思う。レスポンシブかつタッチイベント対応とうことで、さまざまなプラットフォームに耐えうるライブラリであることは間違いない。もし当該要件を求められたならば、検討してみてはいかがだろうか。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。