jQuery图片裁剪插件CropZoom使用方法与bug修复

非常不错的jQuery图片裁剪插件CropZoom，功能非常强大，可以旋转图片，改变图片显示比例，
拖拽到指定区域进行裁剪，裁剪及时显示裁剪图片效果，绝对能满足你的需求，很适合头像图片
裁剪方面的应用。
jQuery图片裁剪插件CropZoom

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

使用方法：
1.加载JS,CSS文件

css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />

2.书写HTML内容

  

  

  

     
     
  

  

3.调用函数

以下是使用及改进笔记：

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模块）

$('#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'