ITエンジニア/デザイナ向けにオープンソースを毎日紹介

操作性も悪くないですし使い勝手良さそうです。

スマートフォンの隆盛もあって写真コンテンツがオンライン上に溢れるようになっています。そんな写真をなるべく格好よく見せようと思うと機械的にサムネイルを生成しているだけではいけません。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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2