スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。 そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介します。

Cropperの使い方

Cropperのデモ画面です。左側の画像が元画像、切り抜いた時の各サイズの画像が右に並んでいます。

もちろん切り抜き部分のサイズ、位置は自由に変えられます。

クロップした画像。

画像サイズも指定できます。

スマートフォンでも動きます。

ハンドル部分もスムーズにつかめます。

Cropperを使えばユーザに自分の写真をアップしてもらった後、そのまますぐに切り抜き加工を行えるようになります。かつ切り抜いた画像をサーバに送れるので、サーバ側では画像ライブラリを用意する必要もありません。

CropperはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Cropper fengyuanchen/cropper