jquery插件：图片截取工具jquery.imagecropper.js

工作需要参考网上的一些代码做了个图片截取工具，最后干脆封装成一个jquery的插件。

除了jquery，本插件还引用了UI库，包括ui.draggable.js

ImageCropper 演示

ImageCropper 下载

插件用法：

1  var  imageCropper  =  $( ' #imgBackground ' ).imageCropper();

要注意的是此插件只应用在有src属性的img标签上。

通过插件输出的参数，即可以通过服务器端代码截取图片，比如：

1  $( ' #imgCroppedImage ' ).attr( ' src ' ,  ' CropImage.ashx?p= '   +  imageCropper.settings.imagePath  +   ' &z= '   +  imageCropper.settings.zoomLevel  +   ' &t= '   +  imageCropper.settings.top  +   ' &l= '   +  imageCropper.settings.left  +   ' &w= '   +  imageCropper.settings.width  +   ' &h= '   +  imageCropper.settings.height  +   ' & '   +  Math.random());

asp.net hander CropImage.ashx:

代码

 1  public class CropImage : IHttpHandler
 2  {
 3      public  void  ProcessRequest(HttpContext context)
 4      {
 5          string imgPath  =  Convert.ToString(context.Request[ " p " ]);
 6           float  zoomLevel  =  Convert.ToSingle(context.Request[ " z " ]);
 7           int  top  =  Convert.ToInt32(context.Request[ " t " ]);
 8           int  left  =  Convert.ToInt32(context.Request[ " l " ]);
 9           int  width  =  Convert.ToInt32(context.Request[ " w " ]);
10           int  height  =  Convert.ToInt32(context.Request[ " h " ]);
11          context.Response.ContentType  =   " image/jpeg " ;
12          Crop(HttpContext.Current.Server.MapPath(imgPath), zoomLevel, top, left, width, height).WriteTo(context.Response.OutputStream);
13      }
14 
15      public MemoryStream Crop(string imgPath,  float  zoomLevel,  int  top,  int  left,  int  width,  int  height)
16      {
17          Image img  =  Image.FromFile(imgPath);
18          Bitmap bitmap  =   new  Bitmap(width, height);
19          Graphics g  =  Graphics.FromImage(bitmap);
20          g.DrawImage(img,  new  Rectangle( 0 ,  0 , width, height),  new  Rectangle(( int )(left  /  zoomLevel), ( int )(top  /  zoomLevel), ( int )(width  /  zoomLevel), ( int )(height  /  zoomLevel)), GraphicsUnit.Pixel);
21          MemoryStream ms  =   new  MemoryStream();
22          bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
23          img.Dispose();
24          g.Dispose();
25          bitmap.Dispose();
26           return  ms;
27      }
28 
29      public bool IsReusable
30      {
31          get
32          {
33               return   false ;
34          }
35      }
36  }

 

重点是插件，因为源代码注释比较全，直接贴代码在这：

  1  /* *
  2  * Copyright (c) 2010 Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
  3  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  4  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  5  *
  6  * Version: 1.0
  7  *
  8  * Demo: https://dl.dropbox.com/u/4390741/ImageCropper.htm
  9  */
 10  ; ( function ($) {
 11      $.fn.extend({
 12          imageCropper:  function (options) {
 13               if  ( ! this .is( ' img ' )  ||   typeof   this .attr( ' src ' )  ==   ' undefined '   ||   this .attr( ' src ' )  ==   '' ) {
 14                   throw   ' Please notice that this jquery plguin only could be applied to img and the src of img could not be null! ' ;
 15              }
 16               var  defaults  =  {
 17                   // 原图路径
 18                  imagePath:  this .attr( ' src ' ),
 19                   // 缩放级别
 20                  zoomLevel:  1 ,
 21                   // 图片相对于截取框是否居中
 22                  center:  false ,
 23                   // 截取框与图片的相对位置
 24                  left:  0 , top:  0 ,
 25                   // 截取框的大小
 26                  width:  200 , height:  200 ,
 27                   // 工作区大小
 28                  cropWorkAreaSize: { width:  600 , height:  400  },
 29                   // 截取框相对于工作区的位置
 30                  cropFrameRect: { center:  true , top:  0 , left:  0  },
 31                   // 缩放范围
 32                  zoom: { min:  0 , max:  2 , step:  0.01  },
 33                   // 回调函数
 34                  callbacks: {
 35                       // 移动图片后
 36                      dragging:  false ,
 37                       // 缩放后
 38                      zoomed:  false
 39                  }
 40              };
 41               if  (options) {
 42                  defaults  =  $.extend(defaults, options);
 43              }
 44               return   new  imageCropper( this , defaults);
 45          }
 46      });
 47 
 48       function  imageCropper(image, settings) {
 49           this .init(image, settings);
 50      };
 51 
 52      imageCropper.prototype  =  {
 53          settings:  false ,
 54          wrapper: $( ' <div class="image-cropper-wrapper"/> ' ),
 55          zoomWrapper: $( ' <div class="zoom-wrapper"><div class="zoom-out-button"/><div class="zoom-scrollbar"><div class="zoom-scroller"/></div><div class="zoom-in-button"/></div> ' ),
 56          img:  false ,
 57          init:  function (image, settings) {
 58               var  context  =   this ;
 59               this .settings  =  settings;
 60              image.addClass( ' background-img ' );
 61               // 生成html
 62              image.wrap( this .wrapper).wrap( ' <div class="crop-work-area"/> ' ).wrap( ' <div class="crop-background"/> ' );
 63               this .wrapper  =  $( ' .image-cropper-wrapper ' );
 64              $( ' .crop-work-area ' ,  this .wrapper).append( ' <div class="crop-frame"><img class="foreground-img" src="" /></div><div class="drag-containment"/> ' );
 65               this .wrapper.append( this .zoomWrapper);
 66 
 67              $( ' .image-cropper-wrapper ' ,  this .wrapper).disableSelection();
 68               this .reset();
 69 
 70               // 图片的拖动
 71              $( ' .crop-background ' ,  this .wrapper).draggable({
 72                  containment: $( ' .drag-containment ' ,  this .wrapper),
 73                  cursor:  ' move ' ,
 74                  drag:  function (event, ui) {
 75                       var  self  =  $( this ).data( ' draggable ' );
 76                       // 同时移动前景图
 77                      $( ' .foreground-img ' ,  this .wrapper).css({
 78                          left: (parseInt(self.position.left)  -  context.settings.cropFrameRect.left  -   1 )  +   ' px ' ,
 79                          top: (parseInt(self.position.top)  -  context.settings.cropFrameRect.top  -   1 )  +   ' px '
 80                      });
 81                       // 得到截图左上点坐标
 82                      context.settings.left  =  context.settings.cropFrameRect.left  -  parseInt($( this ).css( ' left ' ));
 83                      context.settings.top  =  context.settings.cropFrameRect.top  -  parseInt($( this ).css( ' top ' ));
 84                       // 移动图片的callback
 85                      context.fireCallback(context.settings.callbacks.dragging);
 86                  }
 87              });
 88              $( ' .foreground-img ' ,  this .wrapper).draggable({
 89                  containment: $( ' .drag-containment ' ,  this .wrapper),
 90                  cursor:  ' move ' ,
 91                  drag:  function (event, ui) {
 92                       var  self  =  $( this ).data( ' draggable ' );
 93                       // 同时移动背景
 94                      $( ' .crop-background ' ,  this .wrapper).css({
 95                          left: (parseInt(self.position.left)  +  context.settings.cropFrameRect.left  +   1 )  +   ' px ' ,
 96                          top: (parseInt(self.position.top)  +  context.settings.cropFrameRect.top  +   1 )  +   ' px '
 97                      });
 98                       // 得到截图左上点坐标
 99                      context.settings.left  =  context.settings.cropFrameRect.left  -  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' left ' ));
100                      context.settings.top  =  context.settings.cropFrameRect.top  -  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' top ' ));
101                       // 移动图片的callback
102                      context.fireCallback(context.settings.callbacks.dragging);
103                  }
104              });
105               // 点击缩放
106              $( ' .zoom-out-button,.zoom-in-button ' ,  this .wrapper).click( function () {
107                   var  step  =  $( this ).hasClass( ' zoom-in-button ' )  ?  context.settings.zoom.step :  - context.settings.zoom.step;
108                   var  tempZoomLevel  =  context.formatNumber(context.settings.zoomLevel  +  step,  3 );
109                   // 如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
110                   if  (context.settings.zoomLevel  >=  context.settings.zoom.min
111                       &&  context.settings.zoomLevel  <=  context.settings.zoom.max
112                       &&  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' left ' ))  +  tempZoomLevel  *  context.img.width  >  context.settings.cropFrameRect.left  +  context.settings.width
113                       &&  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' top ' ))  +  tempZoomLevel  *  context.img.height  >  context.settings.cropFrameRect.top  +  context.settings.height
114                  ) {
115                      context.settings.zoomLevel  =  tempZoomLevel;
116                      context.zoom(context.img.width  *  context.settings.zoomLevel, context.img.height  *  context.settings.zoomLevel);
117                      $( ' .zoom-scroller ' ,  this .wrapper).css( ' left ' , context.settings.zoomLevel  *   200   /  (context.settings.zoom.max  -  context.settings.zoom.min)  +   ' px ' );
118                  }
119                  context.fireCallback(context.settings.callbacks.zoomed);
120              });
121               // 滚动条缩放
122               var  cancelZoomScroll  =   false ;
123              $( ' .zoom-scroller ' ,  this .wrapper).draggable({
124                  containment: $( ' .zoom-scrollbar ' ,  this .wrapper),
125                  axis:  ' x ' ,
126                  drag:  function (event, ui) {
127                       var  tempZoomLevel  =  (context.settings.zoom.max  -  context.settings.zoom.min)  *  parseInt($( this ).css( ' left ' ))  /   200 ;
128                       // 如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
129                       if  (parseInt($( ' .crop-background ' ,  this .wrapper).css( ' left ' ))  +  tempZoomLevel  *  context.img.width  >  context.settings.cropFrameRect.left  +  context.settings.width
130                           &&  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' top ' ))  +  tempZoomLevel  *  context.img.height  >  context.settings.cropFrameRect.top  +  context.settings.height
131                      ) {
132                          context.settings.zoomLevel  =  tempZoomLevel;
133                          context.zoom(context.img.width  *  context.settings.zoomLevel, context.img.height  *  context.settings.zoomLevel);
134                          cancelZoomScroll  =   false ;
135                          context.fireCallback(context.settings.callbacks.zoomed);
136                      }
137                       else  {
138                          cancelZoomScroll  =   true ;
139                      }
140                  },
141                  stop:  function (event, ui) {
142                       // 如果缩放级别无效 则重置滚动条的值
143                       if  (cancelZoomScroll) {
144                          $( ' .zoom-scroller ' ,  this .wrapper).css( ' left ' , context.settings.zoomLevel  *   200   /  (context.settings.zoom.max  -  context.settings.zoom.min)  +   ' px ' );
145                      }
146                  }
147              });
148          },
149          reset:  function () {
150               this .img  =   new  Image();
151               this .img.src  =   this .settings.imagePath;
152               // 截取框大于工作区，则放大工作区
153               var  tempSize  =  {
154                  width: Math.max( this .settings.cropWorkAreaSize.width,  this .settings.width),
155                  height: Math.max( this .settings.cropWorkAreaSize.height,  this .settings.height)
156              };
157               // 如果截取框在工作区中居中，则重新设置截取框的位置
158               if  ( this .settings.cropFrameRect.center) {
159                   this .settings.cropFrameRect.left  =  (tempSize.width  -   this .settings.width)  /   2 ;
160                   this .settings.cropFrameRect.top  =  (tempSize.height  -   this .settings.height)  /   2 ;
161              }
162               // 如果截取框在图片中居中，则重新设置图片与截取框的相对位置
163               if  ( this .settings.center) {
164                   this .settings.left  =  ( this .img.width  *   this .settings.zoomLevel  -   this .settings.width)  /   2 ;
165                   this .settings.top  =  ( this .img.height  *   this .settings.zoomLevel  -   this .settings.height)  /   2 ;
166              }
167 
168               this .wrapper.width(tempSize.width  +   2 ).height(tempSize.height  +   25 );
169              $( ' .foreground-img,.background-img ' ,  this .wrapper).attr( ' src ' ,  this .settings.imagePath);
170              $( ' .crop-work-area ' ,  this .wrapper).width(tempSize.width).height(tempSize.height);
171              $( ' .crop-frame ' ,  this .wrapper).css({
172                  left:  this .settings.cropFrameRect.left  +   ' px ' ,
173                  top:  this .settings.cropFrameRect.top  +   ' px ' ,
174                  width:  this .settings.width  +   ' px ' ,
175                  height:  this .settings.height  +   ' px '
176              });
177              $( ' .foreground-img ' ,  this .wrapper).css({
178                  left: ( - this .settings.cropFrameRect.left  -   1 )  +   ' px ' ,
179                  top: ( - this .settings.cropFrameRect.top  -   1 )  +   ' px '
180              });
181              $( ' .zoom-scroller ' ,  this .wrapper).css( ' left ' ,  this .settings.zoomLevel  *   200   /  ( this .settings.zoom.max  -   this .settings.zoom.min)  +   ' px ' );
182 
183 
184              $( ' .crop-background ' ,  this .wrapper).css({
185                  opacity:  0.3 ,
186                  left:  this .settings.cropFrameRect.left  -   this .settings.left  +   ' px ' ,
187                  top:  this .settings.cropFrameRect.top  -   this .settings.top  +   ' px '
188              });
189              $( ' .foreground-img ' ,  this .wrapper).css({
190                  left:  - this .settings.left  +   ' px ' ,
191                  top:  - this .settings.top  +   ' px '
192              });
193 
194               this .settings.left  =   this .settings.cropFrameRect.left  -  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' left ' ));
195               this .settings.top  =   this .settings.cropFrameRect.top  -  parseInt($( ' .crop-background ' ,  this .wrapper).css( ' top ' ));
196 
197               this .zoom( this .img.width  *   this .settings.zoomLevel,  this .img.height  *   this .settings.zoomLevel);
198          },
199          zoom:  function (width, height) {
200              $( ' .crop-background, .background-img, .foreground-img ' ,  this .wrapper).width(width).height(height);
201               // 调整拖动限制框
202              $( ' .drag-containment ' ,  this .wrapper).css({
203                  left:  this .settings.cropFrameRect.left  +   this .settings.width  -   this .settings.zoomLevel  *   this .img.width  +   1   +   ' px ' ,
204                  top:  this .settings.cropFrameRect.top  +   this .settings.height  -   this .settings.zoomLevel  *   this .img.height  +   1   +   ' px ' ,
205                  width:  2   *   this .settings.zoomLevel  *   this .img.width  -   this .settings.width  +   ' px ' ,
206                  height:  2   *   this .settings.zoomLevel  *   this .img.height  -   this .settings.height  +   ' px '
207              });
208          },
209          formatNumber:  function (number, bit) {
210               return  Math.round(number  *  Math.pow( 10 , bit))  /  Math.pow( 10 , bit);
211          },
212          fireCallback:  function (fn) {
213               if  ($.isFunction(fn)) {
214                  fn.call( this );
215              };
216          }
217      };
218  })(jQuery);
219 

 参考：http://www.cnblogs.com/brightwang/archive/2008/09/10/1288148.html

转载于:https://www.cnblogs.com/viewercq/archive/2010/04/07/1704093.html