cropzoom使用及改进笔记,实现图片裁剪功能,兼容高版本jquery,加入自定义参数

之前同事用过一个裁剪控件叫Jcrop,个人感觉操作不够直观,于是决定进行改进,经过对比,最后选择了cropzoom。

资源地址:http://www.js-css.cn/a/jscode/cutpic/2013/1102/1013.html

以下是使用及改进笔记:

  1. 兼容问题修正
    首先要说的是jQuery版本的兼容问题,由于1.9以上的jQuery不提供 $.browser,所以如果你用的是1.9以上的jQuery版本,就需要在控件中找出所有 $.browser.msie 并替换成可用的判断。

    e.g

     /*
      * 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'
    
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏