夏日博客

A-A+

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

2016年01月09日 前端设计 暂无评论 阅读 5 views 次

图片裁剪功能大家看过最多的估计是以前dz论坛中的一个flash插件+php的裁剪功能了，像jquery图片裁剪功能了解的不多，其实此插件入门使用简单并且方便调整了，下面一起来看看CropZoom使用方法与bug修复方法吧．

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

jQuery图片裁剪插件CropZoom

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

使用方法:

1.加载JS,CSS文件

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

2.书写HTML内容

  1. <div class="crop">  
  2.    <div id="cropzoom_container"></div>  
  3.    <div id="preview"><img id="generated" src="tmp/head.gif"  /></div>  
  4.    <div class="page_btn">  
  5.       <input type="button" class="btn" id="crop" value="剪切照片" />  
  6.       <input type="button" class="btn" id="restore" value="照片复位" />  
  7.    </div>  
  8.    <div class="clear"></div>  
  9. </div>  

3.调用函数

  1. <script type="text/javascript">  
  2. $(function() {  
  3.      var cropzoom = $('#cropzoom_container').cropzoom({  
  4.           width: 500,//DIV层宽度  
  5.           height: 360,//DIV层高度  
  6.           bgColor: '#ccc',//DIV层背景颜色  
  7.           enableRotation: true,//是否允许旋转图片true false  
  8.           enableZoom: true,//是否允许放大缩小  
  9.           selector: {  
  10.       w:150,//选择器宽度  
  11.       h:200,//旋转高度  
  12.       showPositionsOnDrag:true,//是否显示拖拽的位置洗洗脑  
  13.       showDimetionsOnDrag:false,  
  14.                centered: true,//居中  
  15.       bgInfoLayer:'#fff',  
  16.                borderColor: 'blue',//选择区域边框样式  
  17.       animated: false,  
  18.       maxWidth:150,//最大宽度  
  19.       maxHeight:200,//最大高度  
  20.                borderColorHover: 'yellow'//鼠标放到选择器的边框颜色  
  21.            },  
  22.            image: {  
  23.                source: '/focus19/images/b2.jpg',  
  24.                width: 450,//图片宽度  
  25.                height: 300,//图片高度  
  26.                minZoom: 30,//最小放大比例  
  27.                maxZoom: 150//最大放大比例  
  28.             }  
  29.       });  
  30.   $("#crop").click(function(){//裁剪提交  
  31.     cropzoom.send('resize_and_crop.php', 'POST', {}, function(imgRet) {  
  32.                $("#generated").attr("src", imgRet);  
  33.           });        
  34.   });  
  35.   $("#restore").click(function(){//显示初始状态照片  
  36.     $("#generated").attr("src", "tmp/head.gif");  
  37.     cropzoom.restore();         
  38.   });  
  39. });  
  40. </script>  

以下是使用及改进笔记：

1、兼容问题修正

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

  1. /* 
  2.  * IE浏览器版本 
  3.  */  
  4. iechecker=false;  
  5. if(navigator.appName == "Microsoft Internet Explorer"){  
  6.     iechecker=true;  
  7. }  

2、初始化方法（附上我自己对参数的注释）

该控件用到jquery-ui，所以除了jquery，还需要引入相关js和css（jquery-ui可自行在官网生成，需要resize,slider,dragdrop模块）

  1. <link type="text/css" rel="stylesheet" href="/stylesheets/jquery-ui.min.css"/>  
  2. <script type="text/javascript" src="/javascripts/libs/jquery-1.9.1.min.js"></script>  
  3. <script type="text/javascript" src="/javascripts/libs/jquery-ui.min.js"></script>  
  4. $('#CropzoomContainer').cropzoom({  
  5.     width: 500,               //整个容器尺寸-宽  
  6.     height: 375,              //整个容器尺寸-高  
  7.     bgColor: '#000',          //背景颜色  
  8.     overlayColor: '#000',     //覆盖层颜色  
  9.     selector: {  
  10.         x:0,                  //裁剪框的位置-X轴（当centered属性为true时不可用）  
  11.         y:0,                  //裁剪框的位置-Y轴（当centered属性为true时不可用）  
  12.         w:229,                //裁剪框的宽度  
  13.         h:100,                //裁剪框的高度  
  14.         aspectRatio:false,    //高宽比例固定  
  15.         centered:false,       //裁剪框居中（为true时上面设置的x和y值将无效）  
  16.         borderColor: 'yellow',//裁剪框的边框颜色  
  17.         borderColorHover: 'red',//鼠标经过时裁剪框的边框颜色  
  18.         bgInfoLayer: '#FFF',  //显示裁剪信息的背景颜色  
  19.         infoFontSize: 10,     //显示裁剪信息的字体大小  
  20.         infoFontColor: 'blue',//显示裁剪信息的字体颜色  
  21.         showPositionsOnDrag: true,//拖动时显示位置信息  
  22.         showDimetionsOnDrag: true,//拖动时显示精度信息  
  23.         maxHeight:null,       //允许裁剪框的最大高度  
  24.         maxWidth:null         //允许裁剪框的最大宽度  
  25.     },  
  26.     image: {  
  27.         source:'',            //原图片地址  
  28.         rotation:0,           //默认旋转角度  
  29.         width:0,              //原图显示在裁剪框中的宽度  
  30.         height:0,             //原图显示在裁剪框中的高度  
  31.         minZoom:10,           //最小允许缩放比例  
  32.         maxZoom:150           //最大允许缩放比例  
  33.     },  
  34.     enableRotation: true,     //允许旋转  
  35.     enableZoom: true,         //允许缩放  
  36.     enableResize: true,       //允许改变裁剪框的大小（自定义参数，下面有改动说明）  
  37.     zoomSteps: 1,             //缩放步距  
  38.     rotationSteps: 5,         //旋转步距  
  39.     onSelectorDrag:null,      //裁剪框拖动反馈函数  
  40.     onSelectorDragStop: null, //裁剪框拖放结束反馈函数  
  41.     onSelectorResize: null,   //裁剪框改变大小反馈函数  
  42.     onSelectorResizeStop: null,//裁剪框改变大小结束反馈函数  
  43.     onZoom: null,             //原图缩放反馈函数  
  44.     onRotate:null,            //原图旋转反馈函数  
  45.     onImageDrag:null          //原图拖动反馈函数  
  46. });  

3、自行加入参数，不允许改变裁剪框尺寸

第一步是在参数里加入enableResize参数（包括jquery.cropzoom.js中的default 和 上一步初始化中的定义）

第二步是在使用jquery-ui控件前根据参数判断是否跳过：

  1. if($options.enableResize){  
  2.     _selector.resizable({  
  3.         ...  
  4.     });  
  5. }  

4、修改 send 方法，在提交前判断裁剪尺寸是否合理

首先找到 send 方法，在参数获取完成后，进行范围判断；根据项目需求，我的判断标准是裁剪框内无空白部分，代码如下：

  1. 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){  
  2.     //send  
  3. }  
  4. else{  
  5.     alert('裁剪范围内有空白部分');  
  6. }  

5、裁剪框误差修正（对7以下的低版本IE无效）

由于裁剪框的border是在预设的尺寸外加1px的框，所以视觉判断会产生误差，由于当前项目不考虚兼容ie7以下浏览器，所以可以通过简单地设置box-sizing即可解决这个问题。

找到 createSelector 方法，在cursor后面加入boxSizing 一项设置为 border-box:

  1. 'cursor':'move',  
  2. 'boxSizing':'border-box'  
标签：

给我留言