jQuery圖片裁剪外掛程式CropZoom使用方法與bug修複

非常不錯的jQuery圖片裁剪外掛程式CropZoom，功能非常強大，可以旋轉圖片，改變圖片顯示比例，
拖拽到指定地區進行裁剪，裁剪及時顯示裁剪圖片效果，絕對能滿足你的需求，很適合頭像圖片
裁剪方面的應用。
jQuery圖片裁剪外掛程式CropZoom

相容性：
相容IE6+，fireFox2+，Opera，Safria，Chrome

使用方法：
1.載入JS,CSS檔案

<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
.crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}
#cropzoom_container{float:left; width:500px}
#preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}
.page_btn{float:right; width:150px;  margin-top:20px; line-height:30px; text-align:center}
.clear{clear:both}
.btn{cursor:pointer}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>

2.書寫HTML內容

<div class="crop">
   <div id="cropzoom_container"></div>
   <div id="preview"><img id="generated" src="tmp/head.gif"  /></div>
   <div class="page_btn">
      <input type="button" class="btn" id="crop" value="剪下照片" />
      <input type="button" class="btn" id="restore" value="照片複位" />
   </div>
   <div class="clear"></div>
</div>

3.調用函數

<script type="text/javascript">
$(function() {
     var cropzoom = $('#cropzoom_container').cropzoom({
          width: 500,//DIV層寬度
          height: 360,//DIV層高度
          bgColor: '#ccc',//DIV層背景顏色
          enableRotation: true,//是否允許旋轉圖片true false
          enableZoom: true,//是否允許放大縮小
          selector: {
      w:150,//選取器寬度
      h:200,//旋轉高度
      showPositionsOnDrag:true,//是否顯示拖拽的位置洗洗腦
      showDimetionsOnDrag:false,
               centered: true,//置中
      bgInfoLayer:'#fff',
               borderColor: 'blue',//選擇地區邊框樣式
      animated: false,
      maxWidth:150,//最大寬度
      maxHeight:200,//最大高度
               borderColorHover: 'yellow'//滑鼠放到選取器的邊框顏色
           },
           image: {
               source: '/focus19/images/b2.jpg',
               width: 450,//圖片寬度
               height: 300,//圖片高度
               minZoom: 30,//最小放大比例
               maxZoom: 150//最大放大比例
            }
      });
  $("#crop").click(function(){//裁剪提交
    cropzoom.send('resize_and_crop.php', 'POST', {}, function(imgRet) {
               $("#generated").attr("src", imgRet);
          });     
  });
  $("#restore").click(function(){//顯示初始狀態照片
    $("#generated").attr("src", "tmp/head.gif");
    cropzoom.restore();      
  });
});
</script>

以下是使用及改進筆記：

1、相容問題修正

　　首先要說的是jQuery版本的相容問題，由於1.9以上的jQuery不提供$.browser，所以如果你用的是1.9以上的jQuery版本，就需要在控制項中找出所有 $.browser.msie 並替換成可用的判斷。

/*
 * IE瀏覽器版本
 */
iechecker=false;
if(navigator.appName == "Microsoft Internet Explorer"){
    iechecker=true;
}

2、初始化方法（附上我自己對參數的注釋）

　　該控制項用到jquery-ui，所以除了jquery，還需要引入相關js和css（jquery-ui可自行在官網產生，需要resize,slider,dragdrop模組）

<link type="text/css" rel="stylesheet" href="/stylesheets/jquery-ui.min.css"/>
<script type="text/javascript" src="/javascripts/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/javascripts/libs/jquery-ui.min.js"></script>

$('#CropzoomContainer').cropzoom({
    width: 500,               //整個容器尺寸-寬
    height: 375,              //整個容器尺寸-高
    bgColor: '#000',          //背景顏色
    overlayColor: '#000',     //覆蓋層顏色
    selector: {
        x:0,                  //裁剪框的位置-X軸（當centered屬性為true時不可用）
        y:0,                  //裁剪框的位置-Y軸（當centered屬性為true時不可用）
        w:229,                //裁剪框的寬度
        h:100,                //裁剪框的高度
        aspectRatio:false,    //高寬比例固定
        centered:false,       //裁剪框置中（為true時上面設定的x和y值將無效）
        borderColor: 'yellow',//裁剪框的邊框顏色
        borderColorHover: 'red',//滑鼠經過時裁剪框的邊框顏色
        bgInfoLayer: '#FFF',  //顯示裁剪資訊的背景顏色
        infoFontSize: 10,     //顯示裁剪資訊的字型大小
        infoFontColor: 'blue',//顯示裁剪資訊的字型顏色
        showPositionsOnDrag: true,//拖動時顯示位置資訊
        showDimetionsOnDrag: true,//拖動時顯示精度資訊
        maxHeight:null,       //允許裁剪框的最大高度
        maxWidth:null         //允許裁剪框的最大寬度
    },
    image: {
        source:'',            //原圖片地址
        rotation:0,           //預設旋轉角度
        width:0,              //原圖顯示在裁剪框中的寬度
        height:0,             //原圖顯示在裁剪框中的高度
        minZoom:10,           //最小允許縮放比例
        maxZoom:150           //最大允許縮放比例
    },
    enableRotation: true,     //允許旋轉
    enableZoom: true,         //允許縮放
    enableResize: true,       //允許改變裁剪框的大小（自訂參數，下面有改動說明）
    zoomSteps: 1,             //縮放步距
    rotationSteps: 5,         //旋轉步距
    onSelectorDrag:null,      //裁剪框拖動反饋函數
    onSelectorDragStop: null, //裁剪框拖放結束反饋函數
    onSelectorResize: null,   //裁剪框改變大小反饋函數
    onSelectorResizeStop: null,//裁剪框改變大小結束反饋函數
    onZoom: null,             //原圖縮放反饋函數
    onRotate:null,            //原圖旋轉反饋函數
    onImageDrag:null          //原圖拖動反饋函數
});

3、自行加入參數，不允許改變裁剪框尺寸
第一步是在參數裡加入enableResize參數（包括jquery.cropzoom.js中的default 和 上一步初始化中的定義）
第二步是在使用jquery-ui控制項前根據參數判斷是否跳過：

if($options.enableResize){
    _selector.resizable({
        ...
    });
}

4、修改 send 方法，在提交前判斷裁剪尺寸是否合理
首先找到 send 方法，在參數擷取完成後，進行範圍判斷；
根據項目需求，我的判斷標準是裁剪框內無空白部分，代碼如下：

if(params.imageX<=params.selectorX && params.imageY<=params.selectorY && params.imageX+params.imageW>=params.selectorX+params.selectorW && params.imageY+params.imageH>=params.selectorY+params.selectorH){
    //send
}
else{
    alert('裁剪範圍內有空白部分');
}

5、裁剪框誤差修正（對7以下的低版本IE無效）
由於裁剪框的border是在預設的尺寸外加1px的框，所以視覺判斷會產生誤差，由於當前項目不考虛相容ie7以下瀏覽器，所以可以通過簡單地設定box-sizing即可解決這個問題。
找到 createSelector 方法，在cursor後面加入boxSizing 一項設定為 border-box ：

'cursor':'move',
'boxSizing':'border-box'