jQuery画像切り出しプラグインJcrop_jqueryの簡単な使い方

同僚が Jcrop プラグインを勧めたので、その公式 Web サイト http://deepliquid.com/content/Jcrop.html にアクセスして、圧縮パッケージの最新バージョンをダウンロードしました。この圧縮パッケージには、Jcrop のデモ ファイルがいくつか含まれています。重要なものは、Jcrop.js ファイルと jQuery.Jcrop.css ファイルです。基本的に、このプラグインの使用方法は、いくつかのデモ ファイルを参照することで学習できます。たまたま夕方に少し勉強したので、英語が苦手な友達にも便利なように、以下のように簡単にまとめます。
プラグインを使用するために必要な条件: jQuery.js ファイルのインポート、jQuery.Jcrop.js ファイルのインポート、および JQuery.Jcrop.css ファイルのインポート。
1. 最も基本的な使用法
HTML コード部分:

コードをコピーします コードは次のとおりです:

js 部分:

コードをコピー コードは次のとおりです:

$(
function()
{
$("#demoImage ").Jcrop() ;
}
);

このようにして画像をトリミングすることができます。
2. 選択した領域の座標とコールバック関数を取得します。
HTML コード部分は次のとおりです。

コードをコピー コードは次のとおりです。

;x1
y1
x2
y2
width
height<入力タイプ="text" id="txtHeight" />

JS コード部分は次のとおりです:

コードをコピー コードは次のとおりです。

$(
function() {
//イベント処理
$("#demoImage").Jcrop(
{
onChange:showCoords, //領域選択時 変化時に対応するコールバック関数を実行
onSelect:showCoords //領域選択時 対応するコールバック関数を実行
}
);
}
);
function showCoords(c) {
$("#txtX1").val(c.x); selected area
$("#txtY1").val(c.y); //選択範囲を取得します
$("#txtX2").val(c.x2) ; //選択領域の右下隅の横座標を取得します
$("#txtY2").val(c.y2); //選択領域の右下隅の縦座標を取得します
$("#txtWidth").val(c.w); //選択領域の幅を取得します
$("#txtHeight").val(c.h); //選択領域の高さを取得します
}

3. 共通オプション設定
アスペクト比: 選択された領域は幅/高さの比率に基づきます。1 は正方形を意味します。
minSize: 幅と高さの最小値。
maxSize: 幅と高さの最大値。
setSelect: 初期選択領域を設定します。
bgColor: 背景色
bgOpacity: 背景の透明度。
allowResize: 選択した領域のサイズ変更を許可するかどうか。
allowMove: 選択した領域の移動を許可するかどうか。
例:

コードをコピー コードは次のとおりです:

$(
function () {
$("#demoImage").Jcrop({
aspectRatio: 1, //選択領域のアスペクト比は 1、つまり選択領域は正方形です
bgColor:"#ccc", //トリミング時の背景色はグレーに設定されます
bgOpacity:0.1, //透明度は0.1に設定されます
allowResize:false, //選択領域のサイズは変更はできません
setSelect:[0,0,100,100] //選択領域の初期化
}
);

4 .api の使用法

コードをコピー コードは次のとおりです:

var api = $.Jcrop("#demoImage");

api.disable(); //トリミング効果を無効にするように設定します
api.enable() //トリミング効果を有効にするように設定します
api.setOptions ({allowResize:false});// 対応する構成を設定します
api.setSelect([0 ,0,100,100]) // 選択した領域を設定します