2013年7月2日火曜日

Jcrop で画像を範囲選択できるようにする

Jcrop とは Web ページ内の画像が範囲選択できるようになるライブラリです。


Jcrop
http://deepliquid.com/content/Jcrop.html



ダウンロード

上の公式サイトからスクリプトをダウンロードします。
Download Jcrop v0.9.12 → Jcrop-0.9.12 (zip format) をクリックします。

 zip ファイルを展開します。


index.html を Web ブラウザで開くとデモを見れます。



スクリプトの設置とロード

以下のファイルを自分のアプリ内に設置します。

css/Jcrop.gif
css/jquery.Jcrop.min.css
js/jquery.min.js
js/jquery.Jcrop.min.js

アプリの HTML でこれらのファイルを読み込みます。
sample.js はアプリ本体の js です。
Jcrop で範囲選択させる <img> を追加しておきます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/jquery.Jcrop.min.css"></link>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.Jcrop.min.js"></script>
    <script src="js/sample.js"></script>
  </head>
  <body>
    <h1>Jcrop サンプル</h1>
    <img id="target" src="living1.png">
  </body>
</html>


範囲選択できるようにする

sample.js 内で、画像を選択可能にします。
$(function() {
   $('#target').Jcrop();
});

これで画像をドラッグアンドドロップで範囲選択できるようになります。



範囲選択のイベントを取得する

Jcrop では以下のイベントが使用出来ます。
  • onChange : ドラッグされている間、発生し続ける
  • onSelect : ドロップされた時に発生する
  • onRelease: 別の場所をクリックして選択状態が解除された時に発生する
画像を選択可能にするときに、
コールバック関数を渡すことでこれらのイベントを処理出来ます。
$(function() {
    var hasSelected = function() {
        console.log('選択されました')
    };
 
    var hasChanged = function() {
        console.log('変更されました');
    };
 
    var hasReleased = function() {
        console.log('リリースされました');
    };
 
    $('#target').Jcrop({
        onSelect: hasSelected,
        onChange: hasChanged,
        onRelease: hasReleased
    });
});



選択範囲の大きさや座標を取得する

Jcrop から発行されるイベントには選択範囲に関する情報が付加されます。
コールバック関数の引数として受けることができます。
$(function() {
    var hasSelected = function(data) {
        // 選択領域の左上の頂点の座標
        var x1 = data.x;
        var y1 = data.y;
  
        // 選択領域の右下の頂点の座標
        var x2 = data.x2;
        var y2 = data.y2;
  
        // 選択領域の幅と高さ
        var w = data.w;
        var h = data.h;
  
        console.log('選択領域は(' + x1 + ',' + y1 + ')から(' + x2 + ',' + y2 + ')までの幅' + w + 'px,高さ' + h + 'pxです')
    };
 
    var hasChanged = function() {
    };
 
    var hasReleased = function() {
    };
 
    $('#target').Jcrop({
        onSelect: hasSelected,
        onChange: hasChanged,
        onRelease: hasReleased
    });
});


その他の詳しい使い方は公式サイトのマニュアルをご覧ください。


Jcrop
http://deepliquid.com/content/Jcrop.html