操作性も悪くないですし使い勝手良さそうです。 スマートフォンの隆盛もあって写真コンテンツがオンライン上に溢れるようになっています。そんな写真をなるべく格好よく見せようと思うと機械的にサムネイルを生成しているだけではいけません。CGMであればユーザが手作業で加工したって良いのです。 ということで今回はJavaScriptを使って写真をクロップするcroppicを紹介します。JavaScriptを使うことでUI/UXに優れた形でクロップができます。

croppicの使い方

まずHTML/JavaScript/スタイルシートを下記のように設定します。

JavaScriptはこんな感じ。シンプルですね。

var cropperHeader = new Crop('yourId');

続いてHTML。これもシンプル。

<div id="yourId"></div>

最後にスタイルシート。

#cropContainerHeader {
  width: 200px;
  height: 150px;
  position:relative; /* or fixed or absolute */
}

これで準備完了です。さっそく試してみましょう。

croppicのデモ

公式サイト上でcroppicが試せます。

アップロード処理先はオプション指定できます。

var cropperOptions = {
  uploadUrl:'path_to_your_image_proccessing_file.php'
}
var cropperHeader = new Crop('yourId', cropperOptions);

そして画像をアップロードすると返り値がJSONで得られます。

// 成功した場合
{
  "status":"success",
  "url":"path/img.jpg",
  "width":originalImgWidth,
  "height":originalImgHeight
}
// 失敗した場合
{
  "status":"error",
  "message":"your error message text"
}

コールバックはクロップ前後、マウスでドラッグした時、ズームした時、さらにアップロード前後で取得できます。なおスマートフォンで試した場合、画像を動かすことはできませんがクロップは大丈夫でした。

croppicはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

croppic styoe/croppic