Jquery-画像を切り抜くことができるライブラリ「Cropper」

「Cropper」は、SNSなどのプロフィール画像のアップロードでよく見かける、画像から指定した範囲を切り抜くことができライブラリです。

簡単に切り抜き機能を実装できるのでおすすめです。

他には、画像を回転させたり、ズームなどができたり、色々な機能がついているので、便利かなと思います。

後、スマートフォンにも対応してます。

Cropper

 

ライブラリを読み込む

HTML

サーバーに画像をアップロードする際に、一緒に切り抜き開始位置と範囲を送信するために、hiddenで切り抜き位置・範囲を保持させます。

JS

8行目で取得している切り抜き位置と範囲は、原寸大で取得できるのでそのままhideenの値に設定しても問題ないです。

24行目は、画像を選択した際に、Cropperに選択した画像を表示するようにしています。

サーバー側は、画像と画像の切り抜き範囲が送信されてくるので、そのデータを元に画像を加工して保存すればOKです。

 

簡単に実装した感じは以上のような感じです。

他のズームや回転機能については、英語ですがドキュメントを確認してください。

Cropper-Docs

 

おわり