jcrop原始下載頁(yè)面：猛擊此處
基本使用方法如下：
一、在head部分(<head>和</head>之間)插入相關(guān)css和js文件。
<link href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
二、在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ǐng)選擇裁剪區(qū)域');
return false;
};
});
-->
</script>
三、給相關(guān)圖片加上id以便識(shí)別。
<img src="x.jpg">
這樣就能實(shí)現(xiàn)最簡(jiǎn)單的裁剪效果，至于如何結(jié)合php等動(dòng)態(tài)語(yǔ)句處理圖片，在置頂?shù)奈恼吕镆呀?jīng)給出了示例。
下表給出基本options參數(shù)設(shè)置：
名稱默認(rèn)值說(shuō)明
allowSelecttrue允許新選框
allowMovetrue允許選框移動(dòng)
allowResizetrue允許選框縮放
trackDocumenttrue
baseClass"jcrop"基礎(chǔ)樣式名前綴。說(shuō)明：class="jcrop-holder"，更改的只是其中的 jcrop。
addClassnull添加樣式會(huì)。例：假設(shè)值為 "test"，那么會(huì)添加樣式到
bgColor"black"背景顏色。顏色關(guān)鍵字、HEX、RGB 均可。
bgOpacity0.6背景透明度
bgFadefalse使用背景過(guò)渡效果
borderOpacity0.4選框邊框透明度
handleOpacity0.5縮放按鈕透明度
handleSize9縮放按鈕大小
handleOffset5縮放按鈕與邊框的距離
aspectRatio0選框?qū)捀弑取Ｕf(shuō)明：width/height
keySupporttrue支持鍵盤(pán)控制。按鍵列表：上下左右（移動(dòng)）、Esc（取消）、Tab（跳出裁剪框，到下一個(gè)）
cornerHandlestrue允許邊角縮放
sideHandlestrue允許四邊縮放
drawBorderstrue繪制邊框
dragEdgestrue允許拖動(dòng)邊框
fixedSupporttrue
touchSupportnull
boxWidth0畫(huà)布寬度
boxHeight0畫(huà)布高度
boundary2邊界。說(shuō)明：可以從邊界開(kāi)始拖動(dòng)鼠標(biāo)選擇裁剪區(qū)域
fadeTime400過(guò)度效果的時(shí)間
animationDelay20動(dòng)畫(huà)延遲
swingSpeed3過(guò)渡速度
minSelect[0,0]選框最小選擇尺寸。說(shuō)明：若選框小于該尺寸，則自動(dòng)取消選擇
maxSize[0,0]選框最大尺寸
minSize[0,0]選框最小尺寸
onChangefunction(){}選框改變時(shí)的事件
onSelectfunction(){}選框選定時(shí)的事件
onReleasefunction(){}取消選框時(shí)的事件
下表是api方法
名稱說(shuō)明
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)畫(huà)效果創(chuàng)建選框，參數(shù)格式為：[x,y,x2,y2]
release()取消選框
disable()禁用 Jcrop。說(shuō)明：已有選框不會(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]
新聞熱點(diǎn)
疑難解答
圖片精選
