云南網(wǎng)站建設(shè)創(chuàng)新企業(yè) 昆明多彩網(wǎng)絡(luò)公司

Jcrop(圖片裁剪)中文文檔手冊(cè)

來(lái)源：昆明網(wǎng)站制作 日期：2010-07-06 閱讀： 發(fā)表評(píng)論

多彩科技原創(chuàng)翻譯，轉(zhuǎn)載請(qǐng)注明出處：http://tenstormzproductions.com

Jcrop是一款jquery圖片裁剪插件，可以實(shí)現(xiàn)圖片在線裁剪,達(dá)到和圖像軟件處理的效果,界面和操作也相當(dāng)?shù)娜诵曰�，只需要拖曳鼠�?biāo)即可完成,部署到服務(wù)器也非常簡(jiǎn)單，在網(wǎng)站建設(shè)過(guò)程中輕易美化表單，并且改善用戶體驗(yàn)，本文是Jcrop的中文文檔手冊(cè)。

入門
•下載當(dāng)前版本
•放到頁(yè)面相應(yīng)的位置
•同時(shí)也需要加載jquery

加載順序
•jQuery.js
•Jcrop.js
•Jcrop CSS樣式
如：
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
注意:你也可以調(diào)整成其他的位置

調(diào)用
假如：<img src="flowers.jpg" id="cropbox" />
編寫以下腳本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了

事件處理
Jcrop有2個(gè)主要的事件處理程序 onChange 和 onSelect.
onSelect callback 選擇完成后調(diào)用
onChange callback 選框移動(dòng)（或者說(shuō)改變）時(shí)調(diào)用
定義一個(gè)事件出來(lái)函數(shù)
<script language="Javascript">
function showCoords(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
</script>
然后附加上去
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
onChange: showCoords
});
});
</script>
這是一個(gè)標(biāo)準(zhǔn)的jquery語(yǔ)法，注意最好一個(gè)屬性后面沒(méi)有逗號(hào)

設(shè)置選項(xiàng)
參數(shù)名稱 類型 描述 默認(rèn)
aspectRatio decimal 設(shè)定寬高比 n/a
minSize array [ w, h ] 設(shè)置最小尺寸 n/a
maxSize array [ w, h ] 設(shè)置最大尺寸 n/a
setSelect array [ x, y, x2, y2 ] 設(shè)置一個(gè)初選框的位置 n/a
bgColor color value 設(shè)置背景容器顏色 'black'
bgOpacity decimal 0 - 1 設(shè)置當(dāng)圖像被裁剪選框外的透明度 .6
如：
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>

注意
•Text 必須有引號(hào)
•其他就不要有引號(hào)
•最后一個(gè)參數(shù)后面沒(méi)有逗號(hào)