jcrop原始下載頁面：猛擊此處
基本使用方法如下：
一、在head部分(<head>和</head>之間)插入相關css和js文件。
<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></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: [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('請選擇裁剪區域');
return false;
};
});
-->
</script>
三、給相關圖片加上id以便識別。
<img id="cropbox" src="x.jpg">
這樣就能實現最簡單的裁剪效果，至於如何結合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
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(){}
取消選框時的事件
下表是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]