js图像裁切--DEMO版

暑假实习了快两个月了，跟着师傅学了些东西，也做了些东西，下面我将分享我做的一个小小的功能。其实也只是功能能用，还有很多需要优化，比如代码优化，命名，代码结构，颗粒化，浏览器兼容啊（开发环境是chrome,目前效果还行）。这个图像裁切的demo，一些工具的函数用的是jquery，以及query ui。

希望有需要相关功能的朋友能够给出建设性的意见，先谢谢啦。

这个是DEMO演示，请猛击。接下来我会慢慢完善，我现在上主要是怕以后忘了，同时给自己压力哈。效果不佳请原谅。

HTML设计：

<body>
    <div id="ClipWrapper">
        <div class="_clip-area_">
            <div class="img-mask">
                <div class="dragBox dragLeft" ></div>
                <div class="dragBox dragRight" ></div>
                <div class="dragBox dragUp" ></div>
                <div class="dragBox dragDown" ></div>
                <div class="dragBox dragLeftUp" ></div>
                <div class="dragBox dragRightUp" ></div>
                <div class="dragBox dragLeftDown" ></div>
                <div class="dragBox dragRightDown" ></div>
            </div>
            <img class="clipLayer" src="http://image.jiae.com/images/b/0632945056f8f7559e2e47efd1eada46.jpg" />
            <img class="clipImg" src="http://image.jiae.com/images/b/0632945056f8f7559e2e47efd1eada46.jpg" />
        </div>
        <div class="preview">
            <img class="previewImg" src="http://image.jiae.com/images/b/0632945056f8f7559e2e47efd1eada46.jpg"/>
        </div>
    </div>
</body>

html设计主要用了四层，一个拖动层，其中还包括八个缩放拖动。一个预览裁剪区图像，一个裁剪区半透明，一个全透明的底图像。

CSS设计：

定位均用的事绝对定位，z-index控制显示，保证在一堆。

JS功能具体实现：

对象设计：

注意：以$开头的变量名都是指的Jquery对象。

ImageCrop = function(config) {
    
    this.config = config || {
        panelWidth  : 400,
        panelHeight : 400,
        minMaskW : 100,
        minMaskH : 100,
        dragBoxW : 4,
        dragBoxH : 4,
        dragBoxH : 4,
        previewW : 180,
        previewH : 180
    };
    
    //外框
    this.$panel   = null;

    //预览区
    this.$preview = null;
    
    //拖动层框
    this.$control = null;
    
    //左侧裁切层图
    this.$clipLayer = null;
    
    this.$clipImg   = null;
    
    //预览的图像
    this.$previewImg= null;
    
    //拖动框
    this.$squral   = null;
    

    this.dragEle   = null;

    //原始图像相关属性    
    this.sourceImg = {
        'src'    : '',
        'width'  : 0,
        'height' : 0,
        'rotato' : false,
        'top'    : 0,
        'left'   : 0
    };
    
    //拖动框相对属性
    this.squral = {
        'width' : 0,
        'height': 0,
        'top'   : 0,
        'left'  : 0,
        'right' : 0,
        'bottom' : 0
    };
    
    //裁切区域的相关属性
    this.clipArea = {
        'top'   : 0,
        'right' : 0,
        'bottom': 0,
        'left'  : 0
    };
    
    
    //每次拖动开始的拖动框相关信息。
    this.originPosition = {
        'width'  : 0,
        'height' : 0,
        'left'   : 0,
        'top'    : 0,
        'right'  : 0,
        'bottom' : 0,
        'eventX' : 0,
        'eventY' : 0
    };

};

这些主要是一些静态属性，还有一些需要用到的常量。

方法扩展：

ImageCrop.prototype = {

'init' : function() {},

//此方法主要是初始化对象的静态属性

'_bindEvent' : function() {},

//给相应需要绑定时间的对象绑定事件

'_setDragBox' : function() {},

//设置拖动边框的大小，位置

'_setElePosition' : function( $ele , left , top , right , bottom ) {},

//设置元素的位置

　 /*param: {width:,height:,top:,right:,bottom:,left:}*/
'_setSqural' : function(param) {},

//设置选取框的位置大小。参数为一个静态对象

'_getSqural' : function() {},

//获取选取框的相关信息

'_setEleSize' : function( $ele , width , height ) {},

//设置元素的大小

'_setClip' : function( $ele , top , right , bottom , left ) {},

//剪切图像

'_rander' : function() {},

//页面初始化时渲染页面，比如图像居中显示，大小调节适应外框。。。

'run' : function() {},

//运行此对象中的方法，外部调用的起始接口

'reset' : function(sup) {},

//重置对象中的某些静态属性或相关属性

'_destory' : function() {},

//销毁对象，清空其中的属性值

'submit' : function() {},

//想服务端传递图像裁切的尺寸，位置（暂时还没完成的）

setClip : function() {},

//设置裁切的参数

clipMask : function() {},

//拖拽结束，裁切拖动框遮住的图像

ImageCrop.prototype.preview = function() {},

//在拖动选取框的过程中，对裁切图像的一个实时预览

ImageCrop.prototype.control = function() {},

//拖动，改变裁切框的大小，位置，设置静态对象属性值，此方法比较复杂。

}

外部调用：

var clip = new ImageCrop();
clip.run();

重要说明：裁切的关键是利用css中clip属性来完成，而需要做的工作就是实时的为他的clip:rect(top right bottom left),传递参数。其中这几个参数是需要裁切出来的对象的四个边框相对远点（0,0）的位置大小。还有裁切的对象一定要绝对定位，否则出不来效果。

css具体源码:

CSS Code

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 #ClipWrapper {
  6     width: 400px;
  7     height: 400px;
  8     background: #C2C2C2;
  9 }
 10 ._clip-area_ {
 11     width: 400px;
 12     height: 400px;
 13     background: #000;
 14     position: absolute;
 15     overflow: hidden;
 16     left: 0px;
 17 }
 18 ._clip-area_ .img-mask {
 19     width: 100px;
 20     height: 100px;
 21     border: 1px dashed #fff;
 22     position: absolute;
 23     z-index: 1000;
 24     top: 200px;
 25     left: 200px;
 26     cursor: move;
 27 }
 28 
 29 ._clip-area_ .clipLayer {
 30     position: absolute;
 31     left: 0;
 32     top: 0;
 33     opacity: 0.5;
 34 }
 35 .clipImg {
 36     position: absolute;
 37     top: 0;
 38     left: 0;
 39     clip: rect(200px 300px 300px 200px);
 40     
 41 }
 42 
 43 .dragLeft {
 44     cursor: w-resize;
 45 }
 46 .dragBox {
 47     background: transparent;
 48     width:5px;
 49     height: 5px;
 50     position: absolute;
 51 }
 52 .dragRight {
 53     cursor: e-resize;
 54     left: 90px;
 55     top: 50px;
 56 }
 57 .dragLeft {
 58     cursor: w-resize;
 59     left: 0px;
 60     top: 50px;
 61 }
 62 .dragUp {
 63     cursor: n-resize;
 64     left: 50px;
 65     top: 0;
 66 }
 67 .dragDown {
 68     cursor: s-resize;
 69     left: 50px;
 70     top: 90px;
 71 }
 72 .dragLeftUp {
 73     cursor: nw-resize;
 74     left: 0;
 75     top: 0px;
 76 }
 77 .dragRightUp {
 78     cursor: ne-resize;
 79     left: 90px;
 80     top: 0;
 81 }
 82 .dragLeftDown {
 83     cursor: ne-resize;
 84     left: 0;
 85     top: 90px;
 86 }
 87 .dragRightDown {
 88     cursor: se-resize;
 89     left: 90px;
 90     top: 90px;
 91 }
 92 .preview {
 93     width: 180px;
 94     height: 180px;
 95     overflow: hidden;
 96     position: absolute;
 97     left: 537px;
 98     top: 200px;
 99 }
100 .previewImg {
101     position: absolute;
102     clip: rect(200px 380px 380px 200px);
103     left: -200px;
104     top: -200px;
105     width: 432px;
106     height: 537px;
107 }

js具体源码：

JavaScript Code

  1 // 基础类
  2 ImageCrop = function(config) {
  3     
  4     this.config = config || {
  5         panelWidth  : 400,
  6         panelHeight : 400,
  7         minMaskW : 100,
  8         minMaskH : 100,
  9         dragBoxW : 4,
 10         dragBoxH : 4,
 11         dragBoxH : 4,
 12         previewW : 180,
 13         previewH : 180
 14     };
 15     
 16     this.$panel   = null;
 17     
 18     this.$preview = null;
 19     
 20     this.$control = null;
 21     
 22     this.$clipLayer = null;
 23     
 24     this.$clipImg   = null;
 25     
 26     this.$previewImg= null;
 27     
 28     this.$squral   = null;
 29     
 30     this.dragEle   = null;
 31     
 32     this.sourceImg = {
 33         'src'    : '',
 34         'width'  : 0,
 35         'height' : 0,
 36         'rotato' : false,
 37         'top'    : 0,
 38         'left'   : 0
 39     };
 40     
 41     this.squral = {
 42         'width' : 0,
 43         'height': 0,
 44         'top'   : 0,
 45         'left'  : 0,
 46         'right' : 0,
 47         'bottom' : 0
 48     };
 49     
 50     this.clipArea = {
 51         'top'   : 0,
 52         'right' : 0,
 53         'bottom': 0,
 54         'left'  : 0
 55     };
 56     
 57     
 58     this.originPosition = {
 59         'width'  : 0,
 60         'height' : 0,
 61         'left'   : 0,
 62         'top'    : 0,
 63         'right'  : 0,
 64         'bottom' : 0,
 65         'eventX' : 0,
 66         'eventY' : 0
 67     };
 68 
 69 };
 70 
 71 ImageCrop.prototype = {
 72 
 73     'init' : function() {
 74     // 初始化默认值和渲染页面
 75         var self = this;
 76         var config = self.config;
 77         var $panel = this.$panel = $('#ClipWrapper'); 
 78         var $preview = this.$preview = $panel.find('.preview');
 79         var $control = this.$control = $panel.find('._clip-area_');
 80         var $clipImg = this.$clipImg = $control.find('.clipImg');
 81         var $squral = this.$squral = $control.find('.img-mask');
 82         this.$previewImg = $panel.find('.previewImg');
 83         this.$clipLayer = $panel.find('.clipLayer');
 84         
 85         $clipImg.load(
 86             function() {
 87                 self.sourceImg.src    = this.src;
 88                 self.sourceImg.width  = this.offsetWidth;
 89                 self.sourceImg.height = this.offsetHeight;
 90                 self.sourceImg.rotato = false;
 91             }
 92         );
 93         self._setEleSize( $control , config.panelWidth , config.panelHeight );
 94         
 95         this._setSqural({
 96             width  : $squral[0].offsetWidth,
 97             height : $squral[0].offsetHeight
 98         });
 99     },
100     
101     '_bindEvent' : function() {
102         var self = this;
103         $('.selectPic').click(function() {
104             var reset = new self.reset(self);
105             var $input = $(this).parent().find('input');
106             var src = $input.val();
107             reset.src(src);
108             self.run();
109         });
110     },
111     '_setDragBox' : function() {
112         var self = this;
113         var squral = self.squral;
114         var $panel = this.$panel;
115         var $dragBoxs = $panel.find('dragBox');
116         var config = self.config;
117         var squralW = squral.width;
118         var sqrualH = squral.height;
119         self._setEleSize( $dragBoxs , config.dragBoxW , config.dragBoxH );
120         
121         var $leftBox      = $panel.find('.dragLeft');
122         var $rightBox     = $panel.find('.dragRight');
123         var $upBox        = $panel.find('.dragUp');
124         var $downBox      = $panel.find('.dragDown');
125         var $leftupBox    = $panel.find('.dragLeftUp');
126         var $rightupBox   = $panel.find('.dragRightUp');
127         var $leftdownBox  = $panel.find('.dragLeftDown');
128         var $rightdownBox = $panel.find('.dragRightDown');
129         
130         this._setElePosition( $rightBox , squralW - config.dragBoxW , 0 );
131         this._setElePosition( $leftBox , 0 , 0  );
132         this._setElePosition( $upBox ,  0 , 0 );
133         this._setElePosition( $downBox , 0 ,sqrualH - config.dragBoxH );
134         this._setElePosition( $leftupBox , 0 , 0 );
135         this._setElePosition( $rightupBox , squralW - config.dragBoxW , 0 );
136         this._setElePosition( $leftdownBox , 0 , sqrualH - config.dragBoxH );
137         this._setElePosition( $rightdownBox , squralW - config.dragBoxW , sqrualH - config.dragBoxH );
138         
139         this._setEleSize($rightBox, config.dragBoxW , squral.height);
140         this._setEleSize($leftBox, config.dragBoxW , squral.height);
141         this._setEleSize($upBox, squral.width , config.dragBoxH);
142         this._setEleSize($downBox, squral.width , config.dragBoxH);
143         this._setEleSize($leftupBox, config.dragBoxW , config.dragBoxH);
144         this._setEleSize($rightupBox, config.dragBoxW , config.dragBoxH);
145         this._setEleSize($leftdownBox, config.dragBoxW , config.dragBoxH);
146         this._setEleSize($rightdownBox, config.dragBoxW , config.dragBoxH);
147     },
148     
149     '_setElePosition' : function( $ele , left , top , right , bottom ) {
150         var left = left != null ? left + 'px' : 'auto';
151         var top = top != null ? top + 'px' : 'auto';
152         $ele.css( 'top' , top );
153         $ele.css( 'left' , left );
154         if( arguments.length == 5 ) {
155             var right = right != null ? right + 'px' : 'auto';
156             var bottom = bottom != null ? bottom + 'px' : 'auto';
157             $ele.css( 'right' , right );
158             $ele.css( 'bottom' , bottom );
159         }
160     },
161 
162     /*param: {width:,height:,top:,right:,bottom:,left:}*/
163     '_setSqural' : function(param) {
164         var squral = this.squral;
165         if(param && param.width) {
166             squral.width = param.width;
167         }
168         if(param && param.height) {
169             squral.height = param.height;
170         }
171         if(param && param.left) {
172             squral.left = param.left;
173         }
174         if(param && param.right) {
175             squral.right = param.right;
176         }
177         if(param && param.top) {
178             squral.top = param.top;
179         }
180         if(param && param.bottom) {
181             squral.bottom = param.bottom;
182         }
183             
184     },
185     
186     '_getSqural' : function() {
187         var squral = this.squral;
188         return {
189             'width' : squral.width,
190             'height': squral.height,
191             'top'   : squral.top,
192             'left'  : squral.left,
193             'right' : squral.right,
194             'bottom': squral.bottom
195         };
196     },
197     
198     '_setEleSize' : function( $ele , width , height ) {
199         if(width) {
200             $ele.css( 'width' , width + 'px' );
201         } 
202         if(height) {
203             $ele.css( 'height' , height + 'px' );
204         }
205     },
206 
207     '_setClip' : function( $ele , top , right , bottom , left ) {
208         $ele.css( 'clip' , 'rect('+ top +'px '+ right +'px '+ bottom +'px '+ left +'px)' );;
209     },
210     
211     '_rander' : function() {
212         var self = this;
213         var config = self.config;
214         var sourceImg = self.sourceImg;
215         var sourceImgHeight = sourceImg.height;
216         var sourceImgWidth  = sourceImg.width;
217         var $control = this.$control;
218         var $clipImg = this.$clipImg;
219         var $clipLayer = this.$clipLayer;
220         var $previewImg = this.$previewImg;
221 
222         //等比缩放原图，使得适当的填充在panel中
223         var whProportion =  sourceImgWidth/sourceImgHeight;
224         if ( whProportion > 1 ) {
225             sourceImgWidth = config.panelWidth;
226             sourceImgHeight = Math.round( 1/whProportion * sourceImgWidth ); 
227         } else {
228             sourceImgHeight = config.panelHeight;
229             sourceImgWidth = Math.round( whProportion * sourceImgHeight ); 
230         }
231         self.sourceImg.height = sourceImgHeight;
232         self.sourceImg.width = sourceImgWidth;
233         
234         self._setEleSize( $control , sourceImgWidth , sourceImgHeight );
235         self._setEleSize( $clipImg , sourceImgWidth , sourceImgHeight );
236         self._setEleSize( $clipLayer , sourceImgWidth , sourceImgHeight );
237         
238         //始终让图像显示在正中央的位置
239         if ( sourceImgWidth < config.panelWidth ) {
240             var left = Math.round( ( config.panelWidth - sourceImgWidth )/2 ) ;
241             $control.css( 'left' , ''+ left +'px' );
242         }
243         if ( sourceImgHeight < config.panelHeight ) {
244             var top = Math.round( ( config.panelHeight - sourceImgHeight )/2 ) ;
245             $control.css( 'top' , ''+ top +'px' );
246         }
247         this._setSqural({
248             left : sourceImg.left,
249             top : sourceImg.top,
250             right : sourceImg.width - sourceImg.left - self.squral.width,
251             bottom : sourceImg.height - sourceImg.top - self.squral.height
252         });
253         this.preview();
254         this._setElePosition( self.$squral , self.squral.left , self.squral.top , null , null );
255         this.clipMask();
256         //设置预览区的大小
257         var $preview = this.$preview;
258         self._setEleSize( $preview , config.previewW , config.previewH );
259         this._setDragBox();
260     },
261     'run' : function() {
262         var self = this;
263         self._bindEvent();
264         self.init();
265 
266         var $clipImg = self.$clipImg;
267         var $clipLayer = self.$clipLayer;
268         var $preview = self.$preview;
269         $clipImg.load ( function() {
270             self._rander(); 
271             self.control();
272         });
273 
274     },
275     
276     'reset' : function(sup) {
277         var self = sup;
278         var $clipArea = self.$clipImg;
279         var $mask = self.$squral;
280         var $previewImg = self.$previewImg;
281         var $clipImg = self.$clipImg;
282         var clip = function() {
283             $clipArea.css('clip', 'auto');
284         };
285         var maskColor = function() {
286             $mask.css('background', '#cdcdcd');
287             $mask.css('opacity', '0.3');
288         };
289         var src = function(src) {
290             $clipArea.attr('src', 'src');
291             $clipImg.attr('src', 'src');
292             $previewImg.attr('src', 'src');
293         }
294         return {
295             clip : clip,
296             maskColor: maskColor,
297             src : src
298         };
299     },
300      
301     '_destory' : function() {
302     
303     },
304      
305     'submit' : function() {
306         var $squral = $panel.find('li.dd');
307        
308         var _callBack = function() {
309             img.src = '';
310         }
311        
312        // 坐标尺寸、是否旋转等
313        upload.dao.sumbit();
314     },
315      
316     setClip : function() {
317         //让裁剪块的位置发生改变 切在裁剪区域出现图像。
318         var self      = this;
319         var $squral   = self.$squral;
320         var squral    = self._getSqural();
321         var sourceImg = self.sourceImg;
322         var clipArea  = self.clipArea;
323         var $clipImg  = self.$clipImg;
324 
325         var top    = clipArea.top    = squral.top - sourceImg.top - 1;
326         var right  = clipArea.right  = sourceImg.width - squral.right + 1;
327         var bottom = clipArea.bottom = sourceImg.height - squral.bottom + 1 ;
328         var left   = clipArea.left   = squral.left - sourceImg.left - 1 ;
329         self._setEleSize( $squral , squral.width , squral.height );
330         //self._setClip( $clipImg , top , right , bottom , left );
331     },
332     
333     clipMask : function() {
334         var self = this;
335         var $clipImg = self.$clipImg;
336         var $mask = self.$squral;
337         self._setClip(self.$clipImg, self.clipArea.top, self.clipArea.right, self.clipArea.bottom, self.clipArea.left);
338         $mask.css('background', 'transparent');
339     },
340     // param setOriginPosition{width,height,left,top,eventX,eventY}
341     setOriginPosition : function(param) {
342         if (param && param.width) {
343             this.originPosition.width = param.width;
344         }
345         if (param && param.height) {
346             this.originPosition.height = param.height;
347         }
348         if (param && param.left) {
349             this.originPosition.left = param.left;
350         }
351         if (param && param.top) {
352             this.originPosition.top = param.top;
353         }
354         if (param && param.eventX) {
355             this.originPosition.eventX = param.eventX;
356         }
357         if (param && param.eventY) {
358             this.originPosition.eventY = param.eventY;
359         }
360         if(param && param.right) {
361             this.originPosition.right = param.right;
362         }
363         if(param && param.bottom) {
364             this.originPosition.bottom = param.bottom;
365         }
366     }
367 
368 };
369 // 预览
370 ImageCrop.prototype.preview = function() {
371     //preview
372     //根据裁切块的大小设置预览图片的缩放
373     var self = this;
374     self.setClip();
375     var config = self.config;
376     var sourceImg = self.sourceImg;
377     var $preview = this.$preview;
378     var squralWidth = self.squral.width;
379     var squralHeight = self.squral.height;
380     if ( squralWidth > squralHeight ) {
381         var proportion = config.previewW/squralWidth;
382     } else {
383         var proportion = config.previewH/squralHeight;
384     }
385     var zoomWidth   = Math.round( sourceImg.width  * proportion );
386     var zoomHeight  = Math.round( sourceImg.height * proportion );
387     var $previewImg = this.$previewImg;
388 
389     self._setEleSize( $previewImg , zoomWidth , zoomHeight );
390     
391     var top    = Math.round( this.clipArea.top    * proportion );
392     var right  = Math.round( this.clipArea.right  * proportion );
393     var bottom = Math.round( this.clipArea.bottom * proportion );
394     var left   = Math.round( this.clipArea.left   * proportion );
395     //console.log( top +' | '+ right +' | '+ bottom +' | '+ left )
396     self._setClip( $previewImg , top , right , bottom , left )
397     //滚动图像使裁剪图可见
398     self._setElePosition( $previewImg , -1 * left , -1 * top );
399 }
400 
401 // 拖动可变体
402 ImageCrop.prototype.control = function() {
403 // 调用drag事件
404     var self = this;
405     var squral = self.squral;
406     var $squral = self.$squral;
407     var config = self.config;
408     var originPosition = self.originPosition;
409     var sourceImg = self.sourceImg;
410     var dragDirection = '';
411     
412 
413 // 调用drag事件
414     var dragDirection = '';
415     var self = this;
416     var reset = new self.reset(self);
417     this.$control.find('.img-mask').draggable (  
418         {
419             start : function() {
420                 reset.clip();
421                 reset.maskColor();
422             },
423             drag : function( event , ui ) {
424                 self._setSqural({
425                     left   : parseInt( $squral.css('left') ),
426                     right  : sourceImg.width - squral.left - squral.width,
427                     top    : parseInt( $squral.css('top') ),
428                     bottom : sourceImg.height - squral.top - squral.height
429                 });
430                 self._setElePosition( $squral , squral.left , squral.top );
431                 self.preview();
432 
433             },
434             stop : function () {
435                 self._setElePosition( $squral , squral.left , squral.top );
436                 self._setSqural({
437                     right : sourceImg.width - squral.left - squral.width,
438                     bottom : sourceImg.height - squral.top - squral.height
439                 })
440                 self._setDragBox();
441                 self.preview();
442                 self.clipMask();
443                 
444             },
445             containment : "parent"
446         } 
447     );
448 
449     this.$squral.find('.dragBox').draggable ( 
450         {    
451             start : function( event , ui ) {
452                 var targCName = event.target.className.split(' ')[1];
453                 var direction = '';
454                 switch(targCName) {
455                     case 'dragLeft'  : direction = 'x'; break;
456                     case 'dragRight' : direction = 'x'; break;
457                     case 'dragUp'    : direction = 'y'; break;
458                     case 'dragDown'  : direction = 'y'; break;
459                 }
460                 reset.clip();
461                 reset.maskColor();
462                 $(event.target).draggable ({ axis : direction });
463                 self.setOriginPosition ({
464                     width  : self.squral.width,
465                     height : self.squral.height,
466                     left   : self.squral.left,
467                     top    : self.squral.top,
468                     eventX : event.pageX,
469                     eventY : event.pageY
470                 });
471             },
472             drag : function( event , ui ) {
473                 _zoomSqural(event);
474                 self._setDragBox();
475                 self.preview();
476             },
477             stop : function () {
478                 self._setElePosition( $squral , squral.left , squral.top );
479                 self._setSqural({
480                     right : sourceImg.width - squral.left - squral.width,
481                     bottom : sourceImg.height - squral.top - squral.height
482                 })
483                 self._setDragBox();
484                 self.preview();
485                 self.clipMask();
486             },
487             containment : self.$control
488         }
489     );
490     // 缩放
491     var _zoomSqural = function(event) {
492         //分为八个角
493         var target = event.target;
494         var targCName = target.className.split(' ')[1];
495         switch( targCName ) {
496             case 'dragRight' : _zoomWidth( event , 'right' ); break;
497             case 'dragLeft'  :  _zoomWidth( event , 'left' ); break;
498             case 'dragUp'    : _zoomHeight( event , 'up' ); break;
499             case 'dragDown'  : _zoomHeight( event , 'down' ); break;
500             case 'dragLeftUp' : {
501                 _zoomWidth( event , 'left' );
502                 _zoomHeight( event , 'up' );
503             }
504             break;
505             case 'dragRightUp' : {
506                 _zoomWidth( event , 'right' );
507                 _zoomHeight( event , 'up' );
508             }
509             break;
510             case 'dragLeftDown' : {
511                 _zoomWidth( event , 'left' );
512                 _zoomHeight( event , 'down' );
513             }
514             break;
515             case 'dragRightDown' : {
516                 _zoomWidth( event , 'right' );
517                 _zoomHeight( event , 'down' );
518             }
519             break;
520         }
521     }
522     
523     var _zoomWidth = function( event , direction ) {
524         var width = 0;
525         var $target = $(event.target);
526         var squral = self._getSqural();
527         if ( direction == 'right' ) {
528             width = $target.offset().left - $squral.offset().left  + config.dragBoxW;
529             if ( width >= config.minMaskW && ( squral.left + width ) <= sourceImg.width ) {
530                 self._setElePosition( self.$squral , squral.left , squral.top , null , null );
531                 self._setSqural({ width : width , right : sourceImg.width - squral.left - squral.width });
532             } 
533         }
534         if ( direction == 'left' ) {
535             //width = $squral.offset().left -  $target.offset().left + originPosition.width;
536             width = originPosition.eventX - event.pageX + originPosition.width;
537             if ( width >= config.minMaskW && ( squral.left + width ) <= sourceImg.width ) {
538                 self._setElePosition( $squral , null , null , squral.right , squral.bottom );
539                 self._setSqural({ width : width , left : (sourceImg.width - squral.right - squral.width ) });
540             }
541         }
542     }
543     
544     var _zoomHeight = function( event , direction ) {
545         var height = 0;
546         var $target = $(event.target);
547         if ( direction == 'up' ) {
548             height = $squral.offset().top -  $target.offset().top + originPosition.height;
549             if ( height >= config.minMaskH && ( squral.top + height ) <= sourceImg.width ) {
550                 self._setElePosition( $squral , null , null , squral.right ,squral.bottom );
551                 self._setSqural({ height : height , top : (sourceImg.height - squral.bottom - squral.height) });
552             }
553         }
554         if ( direction == 'down' ) {
555             height =  $target.offset().top - $squral.offset().top  + config.dragBoxH;
556             if ( height >= config.minMaskH && ( squral.top + height ) <= sourceImg.height ) {
557                 self._setSqural({ height : height , bottom : sourceImg.height - squral.top - squral.height  });
558                 self._setElePosition( self.$squral , squral.left , squral.top , null , null );
559             }
560         }
561     }
562 }
563 var clip = new ImageCrop();
564 clip.run();

posted on 2012-08-28 10:05 前端小蔡阅读(16025) 评论(15) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端小蔡

js图像裁切--DEMO版

公告

导航