jcrop基本參數(shù)一覽

更新時(shí)間：2013年07月16日 18:34:55 作者：

Jcrop是基于JQuery的圖片裁剪插件，這里簡單介紹下基本參數(shù)，需要的朋友可以參考下

jcrop原始下載頁面：猛擊此處

基本使用方法如下：

一、在head部分(<head>和</head>之間)插入相關(guān)css和js文件。

二、在head部分插入回調(diào)函數(shù)等相關(guān)處理參數(shù)。

復(fù)制代碼代碼如下:

<script language="Javascript">
  <!--
  jQuery(function($){
 // Create variables (in this scope) to hold the API and image size
  var jcrop_api, boundx, boundy;

  $('#cropbox').Jcrop({
  minSize: [0,0],
  maxSize:[0,0],
  setSelect: [0,0,0,0],
  boxWidth:800,
  borderOpacity:0.3,
  keySupport:false,
  dragEdges:false,
  allowSelect:false,
  allowResize:false,
  bgOpacity:0.2,
  boundary:0,
  //allowMove:false,
  addClass: 'jcrop-handle',
  onSelect: updateCoords,
  },
  function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;
  });
  function updateCoords(c)
  {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  };
  function checkCoords()
  { 
  if (parseInt($('#w').val())) return true;
  alert('請選擇裁剪區(qū)域');
  return false;
  }; 
  });
-->
</script>

三、給相關(guān)圖片加上id以便識別。

<img id="cropbox" src="x.jpg">
這樣就能實(shí)現(xiàn)最簡單的裁剪效果，至于如何結(jié)合php等動(dòng)態(tài)語句處理圖片，在置頂?shù)奈恼吕镆呀?jīng)給出了示例。

下表給出基本options參數(shù)設(shè)置：

名稱	默認(rèn)值	說明
allowSelect	true	允許新選框
allowMove	true	允許選框移動(dòng)
allowResize	true	允許選框縮放
trackDocument	true
baseClass	"jcrop"	基礎(chǔ)樣式名前綴。說明：class="jcrop-holder"，更改的只是其中的 jcrop。
addClass	null	添加樣式會(huì)。例：假設(shè)值為 "test"，那么會(huì)添加樣式到 class="test jcrop-holder"
bgColor	"black"	背景顏色。顏色關(guān)鍵字、HEX、RGB 均可。
bgOpacity	0.6	背景透明度
bgFade	false	使用背景過渡效果
borderOpacity	0.4	選框邊框透明度
handleOpacity	0.5	縮放按鈕透明度
handleSize	9	縮放按鈕大小
handleOffset	5	縮放按鈕與邊框的距離
aspectRatio	0	選框?qū)捀弑?。說明：width/height
keySupport	true	支持鍵盤控制。按鍵列表：上下左右（移動(dòng)）、Esc（取消）、Tab（跳出裁剪框，到下一個(gè)）
cornerHandles	true	允許邊角縮放
sideHandles	true	允許四邊縮放
drawBorders	true	繪制邊框
dragEdges	true	允許拖動(dòng)邊框
fixedSupport	true
touchSupport	null
boxWidth	0	畫布寬度
boxHeight	0	畫布高度
boundary	2	邊界。說明：可以從邊界開始拖動(dòng)鼠標(biāo)選擇裁剪區(qū)域
fadeTime	400	過度效果的時(shí)間
animationDelay	20	動(dòng)畫延遲
swingSpeed	3	過渡速度
minSelect	[0,0]	選框最小選擇尺寸。說明：若選框小于該尺寸，則自動(dòng)取消選擇
maxSize	[0,0]	選框最大尺寸
minSize	[0,0]	選框最小尺寸
onChange	function(){}	選框改變時(shí)的事件
onSelect	function(){}	選框選定時(shí)的事件
onRelease	function(){}	取消選框時(shí)的事件

下表是api方法

名稱	說明
setImage(string)	設(shè)定（或改變）圖像。例：jcrop_api.setImage("newpic.jpg")
setOptions(object)	設(shè)定（或改變）參數(shù)，格式與初始化設(shè)置參數(shù)一樣
setSelect(array)	創(chuàng)建選框，參數(shù)格式為：[x,y,x2,y2]
animateTo(array)	用動(dòng)畫效果創(chuàng)建選框，參數(shù)格式為：[x,y,x2,y2]
release()	取消選框
disable()	禁用 Jcrop。說明：已有選框不會(huì)被清除。
enable()	啟用 Jcrop
destroy()	移除 Jcrop
tellSelect()	獲取選框的值（實(shí)際尺寸）。例子：console.log(jcrop_api.tellSelect())
tellScaled()	獲取選框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled())
getBounds()	獲取圖片實(shí)際尺寸，格式為：[w,h]
getWidgetSize()	獲取圖片顯示尺寸，格式為：[w,h]
getScaleFactor()	獲取圖片縮放的比例，格式為：[w,h]