jQuery Jcrop API參數說明(中文版)

標籤：ring   圖片顯示   api   data-   lease   change   href   alt   使用方法   

Jcrop是一個jQuery圖片裁剪外掛程式，它能為你的WEB應用程式快速簡單地提供圖片裁剪的功能。特點如下：

• 對所有圖片均unobtrusively（無侵入的，保持DOM簡潔）
• 支援寬高比例鎖定
• 支援 minSize/maxSize設定
• 支援改變選區或移 動選區時的回調（Callback）
• 支援用鍵盤微調選區
• 通過API建立互動，比如動畫效果
• 支援CSS樣式

版本及Demo

• jQuery v1.5.1+
• Jcrop v0.9.9
• Demo地址：http://code.ciaoca.com/jquery/jcrop/demo/
• ：http://deepliquid.com/content/Jcrop_Download.html

options 參數說明（可選）

 

參數名	預設值	參數說明
allowSelect	true	允許新選框
allowMove	true	允許選框移動
allowResize	true	允許選框縮放
trackDocument	true
baseClass	"jcrop"	基礎樣式名首碼。說明：class="jcrop-holder"，更改的只是其中的 jcrop。
addClass	null	添加樣式。假設class名為 "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檔案

 

[html] view plain copy 

1. <link rel="stylesheet" href="css/jquery.Jcrop.css">  

 

載入JavaScript檔案

 

[html] view plain copy 

1. <script src="js/jquery.js"></script>    
2. <script src="js/jquery.Jcrop.js"></script>   

 

給映像標籤加上ID

 

[html] view plain copy 

1. <img id="element_id" src="pic.jpg">  

 

調用Jcrop

 

[javascript] view plain copy 

1. $("#element_id").Jcrop();  

API方法說明

 

方法	方法的使用說明
setImage(string)	設定（或改變）映像。例：jcrop_api.setImage("newpic.jpg")
setOptions(object)	設定（或改變）參數，格式與初始化設定參數一樣
setSelect(array)	建立選框，參數格式為：[x,y,x2,y2]
animateTo(array)	用動畫效果建立選框，參數格式為：[x,y,x2,y2]
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 API參數說明(中文版)