画像を自由にトリミングできるjQueryプラグイン「Cropper」

cropper-js
  • URLをコピーしました!

よくWEBサービスで、プロフィールなどを作成する際にアバター画像をアップロードすることがありますが、親切なサイトだとその場でトリミング切り抜き)ができることもあります。
いつもは利用する側なのですが、今回は作る側として画像を加工できるjQueryプラグインCopper」を紹介します。
指定する高さに合わせるために、縦横比を合わせて強制的にカットする場合に便利です!

目次

何ができるかデモサイトで確認

WEB上で画像トリミングを可能にする、jQueryプラグインの素晴らしさを紹介するには、デモサイトをご覧いただくのが手っ取り早いです。

Cropper

CopperjQueryで動作するので、リアルタイム画像トリミングすることができます!
プラグインのソースはこちらから!

知っておきたい機能

トリミングする位置も大きさも自由に決められるのですが、私が勝手に目玉だと思っているのが、縦横比を固定できる機能です。
今の画面の標準16:9や昔の4:3、それから、SNSのアバター画像ではよく使われる1:1の正方形が使われていますね。
これらをサイトに合わせてデフォルトで設定していれば、運営者だけでなく利用者の負担も減ります。
あとは、拡大や回転、反転と言った効果も付けられるので試してみてください。

Copperの使い方

まずは必要なライブラリCDNで読み込みます。

次にHTMLです。
imgタグの外側のキャンバスになる部分は、適当な幅と高さを決めておきましょう。

最後に初期設定です。
一応、オプション無しでも動きますが、参考までにアバター画像を想定して縦横比1:1にするオプションだけ追加します。

サーバーサイドでのトリミング処理

あと、サーバー側へのデータの渡し方と加工処理については、以下のサイトを参考にどうぞ。
LaravelIntervention Imageというパッケージを使って保存する方法が掲載されています。

最後に、デモサイトにもある加工中のプレビュー機能を付けると、もっと良さそうですね。
いや~、何でも簡単な時代になりました。

著:CodeMafia 外村将大
¥1,639 (2024/07/15 21:58時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次