A-A+

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

2016年01月09日 web前端设计 暂无评论 阅读 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'  
标签:

给我留言