jQuery画像トリミングプラグインJcropの簡単な使用

9985 ワード
jquery
【optionsパラメータ説明】
名前
デフォルト
説明
allowSelect
true
新規選択を許可
allowMove
true
選択範囲の移動を許可
allowResize
true
選択範囲のズームを許可
trackDocument
true
 
baseClass
"jcrop"
ベーススタイル名の接頭辞.説明:class=「jcrop-holder」で、変更されたのはその中のjcropだけです.
addClass
null
スタイル会を追加します.例:値が「test」であると仮定すると、class=「test jcrop-holder」にスタイルが追加されます.
bgColor
"black"
背景色.色キー、HEX、RGBどちらでも構いません.
bgOpacity
0.6
背景の透明度
bgFade
false
バックグラウンド遷移効果の使用
borderOpacity
0.4
選択した枠線の透明度
handleOpacity
0.5
ズームボタンの透明度
handleSize
9
ズームボタンのサイズ
handleOffset
5
ズームボタンと枠線の距離
aspectRatio
0
ボックス幅の高さ比を選択します.説明:width/height
keySupport
true
キーボードコントロールをサポートします.キーリスト:上下左右(移動)、Esc(キャンセル)、Tab(裁断枠から飛び出して次へ)
cornerHandles
true
コーナーズームを許可
sideHandles
true
四辺ズームを許可
drawBorders
true
枠線の描画
dragEdges
true
外枠のドラッグを許可
fixedSupport
true
 
touchSupport
null
 
boxWidth
0
キャンバスの幅
boxHeight
0
キャンバスの高さ
boundary
2
境界.説明:境界からマウスをドラッグしてトリミング領域を選択できます.
fadeTime
400
過剰効果の時間
animationDelay
20
アニメーションの遅延
swingSpeed
3
かとそくど
minSelect
[0,0]
ボックスの最小選択サイズ.説明:選択ボックスがサイズより小さい場合は、自動的に選択解除されます.
maxSize
[0,0]
選択ボックスの最大サイズ
minSize
[0,0]
ボックスの最小サイズ
onChange
function(){}
ボックス変更時のイベント
onSelect
function(){}
セレクトボックスタイミングのイベント
onRelease
function(){}
選択解除時のイベント
【使い方】
CSSファイルの読み込み
<link rel="stylesheet" href="css/jquery.Jcrop.css">

JavaScriptファイルの読み込み
<script src="js/jquery.js"></script>  <script src="js/jquery.Jcrop.js"></script> 

IMGタグにIDを付ける
<img id="element_id" src="pic.jpg">

Jcropを呼び出す
$("#element_id").Jcrop();

【APIインタフェース】
名前
説明
setImage(string)
画像を設定(または変更)します.例:jcrop_api.setImage("newpic.jpg")
setOptions(object)
初期化設定パラメータと同じフォーマットのパラメータを設定(または変更)
setSelect(array)
[x,y,x 2,y 2]のパラメータ形式で選択ボックスを作成します.
animateTo(array)
アニメーション効果で選択ボックスを作成します.パラメータのフォーマットは[x,y,x 2,y 2]です.
release()
選択解除
disable()
Jcropを無効にします.説明:既存の選択ボックスはクリアされません.
enable()
Jcropの有効化
destroy()
Jcropの削除
tellSelect()
選択ボックスの値(実際のサイズ)を取得します.例:console.log(jcrop_api.tellSelect())
tellScaled()
選択ボックスの値(インタフェースサイズ)を取得します.例:console.log(jcrop_api.tellScaled())
getBounds()
画像の実際のサイズを取得します.フォーマットは[w,h]です.
getWidgetSize()
画像表示サイズを取得し、[w,h]のフォーマット
getScaleFactor()
画像のスケールを取得します.フォーマットは[w,h]です.
 
jQuery画像トリミングプラグインJcropの簡単な使用
作者:佚名来源:网络收集更新时间:2011-10-10
共有
0
 
 
同僚はJcropというプラグインを推薦して、その公式サイトに着きましたhttp://deepliquid.com/content/Jcrop.html最新版の圧縮パッケージをダウンロードして、圧縮パッケージの中にJcropのいくつかのdemoファイルを含んで、肝心なJcrop.jsファイルとjQuery.Jcrop.cssファイル.基本的にいくつかのdemoファイルを参照すれば、このプラグインの使用を学ぶことができます.夜はちょうど勉強して研究して、今簡単にまとめて以下のようにして、英語の悪い友达にも便利です.プラグインを使用するには、jQueryを導入する必要があります.jsファイル、jQueryを導入する.Jcrop.jsファイル、JQueryを導入Jcrop.cssファイル.  1.最も基本的な使用方法htmlコード部分:

        
      
jsセクション:
  

      $( 
       function() 
       { 
       $("#demoImage").Jcrop(); 
       } 
       ); 
      
で画像を切り取ることができます.
 
2.選択された領域の座標とコールバック関数htmlのコード部分は以下の通りです.
  

        
       <label>x1</label><input type="text" id="txtX1" /> 
       <label>y1</label><input type="text" id="txtY1" /> 
       <label>x2</label><input type="text" id="txtX2" /> 
       <label>y2</label><input type="text" id="txtY2" /> 
       <label>width</label><input type="text" id="txtWidth" /> 
       <label>height</label><input type="text" id="txtHeight" /> 
      
jsコードセクションは次のとおりです.
  

      $( 
       function() { 
       //     
       $("#demoImage").Jcrop( 
       { 
       onChange:showCoords, //          ，          
       onSelect:showCoords //        ，          
       } 
       ); 
       } 
       ); 
       function showCoords(c) { 
       $("#txtX1").val(c.x); //             
       $("#txtY1").val(c.y); //             
       $("#txtX2").val(c.x2); //             
       $("#txtY2").val(c.y2); //             
       $("#txtWidth").val(c.w); //          
       $("#txtHeight").val(c.h); //          
       }

3.一般的なオプション設定
aspectRatio:選択領域は幅/高さ比で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]); //       
      
WebSocketチュートリアル
jQuery extendネーミングスペースeachなどの説明