Jcrop是一個jQuery插件，它能為你的WEB應用程序快速簡單地提供圖片裁剪的功能。
特點：
- 對所有圖片均unobtrusively（無侵入的，保持DOM簡潔）
- 支持寬高比例鎖定
- 支持 minSize / maxSize設置
- 支持改變選區或移 動選區時的回調（Callback）
- 支持用鍵盤微調選 區
- 通過API創建互 動，比如動畫效果
- 支持CSS樣式
入門
•下載當前版本
•放到頁面相應的位置
•同時也需要加載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" />
注意:你也可以調整成其他的位置
調用
假如：<img src="flowers.jpg" id="cropbox" />
編寫以下腳本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了
事件處理
Jcrop有2個主要的事件處理程序 onChange 和 onSelect.
onSelect callback 選擇完成后調用
onChange callback 選框移動（或者說改變）時調用
定義一個事件出來函數
<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>
這是一個標准的jquery語法，注意最好一個屬性后面沒有逗號
設置選項
參數名稱 類型 描述 默認
aspectRatio decimal 設定寬高比 n/a
minSize array [ w, h ] 設置最小尺寸 n/a
maxSize array [ w, h ] 設置最大尺寸 n/a
setSelect array [ x, y, x2, y2 ] 設置一個初選框的位置 n/a
bgColor color value 設置背景容器顏色 'black'
bgOpacity decimal 0 - 1 設置當圖像被裁剪選框外的透明度 .6
如：
<script language="Javascript"> jQuery(function() { jQuery('#cropbox').Jcrop({ onSelect: showCoords, bgColor: 'black', bgOpacity: .4, setSelect: [ 100, 100, 50, 50 ], aspectRatio: 16 / 9 }); }); </script>
歡迎掃描此二維碼關注web館公眾號
作者：web館
出處：http://www.cnblogs.com/xiaoyao2011/
歡迎任何形式的轉載，但請務必注明出處。