jcrop原始下載頁面猛擊此處
基本使用方法如下
一在head部分(<head>和</head>之間)插入相關css和js文件
<link rel="stylesheet" href="css/jqueryJcropcss">
<script src="js/jqueryjs"></script>
<script src="js/jqueryJcropjs"></script>
二在head部分插入回調函數等相關處理參數
復制代碼 代碼如下:
<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: [
]
maxSize:[
]
setSelect: [
]
boxWidth:
borderOpacity:
keySupport:false
dragEdges:false
allowSelect:false
allowResize:false
bgOpacity:
boundary:
//allowMove:false
addClass:
jcrop
handle
onSelect: updateCoords
}
function(){
// Use the API to get the real image size
var bounds = this
getBounds();
boundx = bounds[
];
boundy = bounds[
];
// 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(
請選擇裁剪區域
);
return false;
};
});
>
</script>
三給相關圖片加上id以便識別
<img id="cropbox" src="xjpg">
這樣就能實現最簡單的裁剪效果至於如何結合php等動態語句處理圖片在置頂的文章裡已經給出了示例
下表給出基本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
背景透明度
bgFade
false
使用背景過渡效果
borderOpacity
選框邊框透明度
handleOpacity
縮放按鈕透明度
handleSize
縮放按鈕大小
handleOffset
縮放按鈕與邊框的距離
aspectRatio
選框寬高比
說明
width/height
keySupport
true
支持鍵盤控制
按鍵列表
上下左右（移動）
Esc（取消）
Tab（跳出裁剪框
到下一個）
cornerHandles
true
允許邊角縮放
sideHandles
true
允許四邊縮放
drawBorders
true
繪制邊框
dragEdges
true
允許拖動邊框
fixedSupport
true
touchSupport
null
boxWidth
畫布寬度
boxHeight
畫布高度
boundary
邊界
說明
可以從邊界開始拖動鼠標選擇裁剪區域
fadeTime
過度效果的時間
animationDelay
動畫延遲
swingSpeed
過渡速度
minSelect
[
]
選框最小選擇尺寸
說明
若選框小於該尺寸
則自動取消選擇
maxSize
[
]
選框最大尺寸
minSize
[
]
選框最小尺寸
onChange
function(){}
選框改變時的事件
onSelect
function(){}
選框選定時的事件
onRelease
function(){}
取消選框時的事件
下表是api方法
名稱 |
說明 |
setImage(string)
設定（或改變）圖像
例
jcrop_api
setImage("newpic
jpg")
setOptions(object)
設定（或改變）參數
格式與初始化設置參數一樣
setSelect(array)
創建選框
參數格式為
[x
y
x
y
]
animateTo(array)
用動畫效果創建選框
參數格式為
[x
y
x
y
]
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]
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20605.html
