サイトアイコン IT NEWS

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

cropper-js

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

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

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

出典:Cropper

ソースはこちらから!

知っておきたい機能

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

Copperの使い方

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

<!-- CSS -->
<link  href="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.css" rel="stylesheet">
<!-- JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.6/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.js"></script>

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

<!-- HTML -->
<div style="width: 480px; height: 320px;">
    <img id="image" src="image.jpg">
</div>
<button type="button" id="done">done</button>

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

<script>
$('#image').cropper({
    aspectRatio: 1 / 1
});
</script>

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

Intervention Imageパッケージはこちら。

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

モバイルバージョンを終了