画像トリミング機能を提供するJSライブラリ「react-image-crop」の紹介

画像トリミング機能は、ビューアソフト等に見られる代表的な機能のひとつであるが、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 nametypedefaulthint
src(必須)string画像ファイルを指定
onChange(必須)Functionチェンジイベントに応じて発生するコールバック
crop(必須)Objectトリミングパラメータを定義
minWidthnumber0トリミング最小幅
minHeightnumber0トリミング最小高さ
maxWidthnumberトリミング最大幅
maxHeightnumberトリミング最大高さ
keepSelectionboolfalse選択領域外のクリックで、選択解除するか否か
disabledboolfalse非活性
lockedboolfalseトリミング範囲、サイズ変更の無効化
classNamestring<ReactCrop />にclass名を付与する
styleObject梱包要素のインラインスタイルオブジェクト
imageStyleObject画像要素のインラインスタイルオブジェクト
onCompleteFunction() => {}トリミング範囲のサイズ変更、ドラッグの完了に応じて発生するコールバック
onImageLoadedFunction() => {}画像読み込みに応じて発生するコールバック
onImageErrorFunction() => {}画像読み込みエラーに応じて発生するコールバック
onDragStartFunction() => {}ドラッグ、サイズ変更開始に応じて発生するコールバック
onDragEndFunction() => {}ドラッグ、サイズ変更後に発生するコールバック
crossoriginFunction画像にcrossorigin属性を付与
renderSelectionAddonFunctionトリミング範囲にカスタム要素をレンダリング
renderComponentFunction画像の代わりにカスタム要素をレンダリング
ruleOfThirdsboolfalseトリミング範囲に縦横三等分の線を表示
circularCropboolfalseトリミング範囲を円で表示

デモンストレーション

公式が用意したソースコードをオンラインエディタ越しにご覧いただこう。

まとめ

画像トリミングツールを提供するJSライブラリ「react-image-crop」の紹介だった。

デモンストレーションで示したとおりビューアソフトやデザインツールで見られる画像トリミング機能が実現できるものと認識してもらえたと思う。レスポンシブかつタッチイベント対応とうことで、さまざまなプラットフォームに耐えうるライブラリであることは間違いない。もし当該要件を求められたならば、検討してみてはいかがだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。