[Summary view] [Print] [Text view]

   1  /**
   2   * Copyright (c) 2006, David Spurr (http://www.defusion.org.uk/)
   3   * All rights reserved.
   4   *
   5   * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
   6   *
   7   *     * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
   8   *     * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
   9   *     * Neither the name of the David Spurr nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
  10   *
  11   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  12   *
  13   * http://www.opensource.org/licenses/bsd-license.php
  14   *
  15   * See scriptaculous.js for full scriptaculous licence
  16   */
  17  
  18  var CropDraggable=Class.create();
  19  Object.extend(Object.extend(CropDraggable.prototype,Draggable.prototype),{initialize:function(_1){
  20  this.options=Object.extend({drawMethod:function(){
  21  }},arguments[1]||{});
  22  this.element=$(_1);
  23  this.handle=this.element;
  24  this.delta=this.currentDelta();
  25  this.dragging=false;
  26  this.eventMouseDown=this.initDrag.bindAsEventListener(this);
  27  Event.observe(this.handle,"mousedown",this.eventMouseDown);
  28  Draggables.register(this);
  29  },draw:function(_2){
  30  var _3=Position.cumulativeOffset(this.element);
  31  var d=this.currentDelta();
  32  _3[0]-=d[0];
  33  _3[1]-=d[1];
  34  var p=[0,1].map(function(i){
  35  return (_2[i]-_3[i]-this.offset[i]);
  36  }.bind(this));
  37  this.options.drawMethod(p);
  38  }});
  39  var Cropper={};
  40  Cropper.Img=Class.create();
  41  Cropper.Img.prototype={initialize:function(_7,_8){
  42  this.options=Object.extend({ratioDim:{x:0,y:0},minWidth:0,minHeight:0,displayOnInit:false,onEndCrop:Prototype.emptyFunction,captureKeys:true},_8||{});
  43  if(this.options.minWidth>0&&this.options.minHeight>0){
  44  this.options.ratioDim.x=this.options.minWidth;
  45  this.options.ratioDim.y=this.options.minHeight;
  46  }
  47  this.img=$(_7);
  48  this.clickCoords={x:0,y:0};
  49  this.dragging=false;
  50  this.resizing=false;
  51  this.isWebKit=/Konqueror|Safari|KHTML/.test(navigator.userAgent);
  52  this.isIE=/MSIE/.test(navigator.userAgent);
  53  this.isOpera8=/Opera\s[1-8]/.test(navigator.userAgent);
  54  this.ratioX=0;
  55  this.ratioY=0;
  56  this.attached=false;
  57  $A(document.getElementsByTagName("script")).each(function(s){
  58  if(s.src.match(/cropper\.js/)){
  59  var _a=s.src.replace(/cropper\.js(.*)?/,"");
  60  var _b=document.createElement("link");
  61  _b.rel="stylesheet";
  62  _b.type="text/css";
  63  _b.href=_a+"cropper.css";
  64  _b.media="screen";
  65  document.getElementsByTagName("head")[0].appendChild(_b);
  66  }
  67  });
  68  if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
  69  var _c=this.getGCD(this.options.ratioDim.x,this.options.ratioDim.y);
  70  this.ratioX=this.options.ratioDim.x/_c;
  71  this.ratioY=this.options.ratioDim.y/_c;
  72  }
  73  this.subInitialize();
  74  if(this.img.complete||this.isWebKit){
  75  this.onLoad();
  76  }else{
  77  Event.observe(this.img,"load",this.onLoad.bindAsEventListener(this));
  78  }
  79  },getGCD:function(a,b){return 1;
  80  if(b==0){
  81  return a;
  82  }
  83  return this.getGCD(b,a%b);
  84  },onLoad:function(){
  85  var _f="imgCrop_";
  86  var _10=this.img.parentNode;
  87  var _11="";
  88  if(this.isOpera8){
  89  _11=" opera8";
  90  }
  91  this.imgWrap=Builder.node("div",{"class":_f+"wrap"+_11});
  92  if(this.isIE){
  93  this.north=Builder.node("div",{"class":_f+"overlay "+_f+"north"},[Builder.node("span")]);
  94  this.east=Builder.node("div",{"class":_f+"overlay "+_f+"east"},[Builder.node("span")]);
  95  this.south=Builder.node("div",{"class":_f+"overlay "+_f+"south"},[Builder.node("span")]);
  96  this.west=Builder.node("div",{"class":_f+"overlay "+_f+"west"},[Builder.node("span")]);
  97  var _12=[this.north,this.east,this.south,this.west];
  98  }else{
  99  this.overlay=Builder.node("div",{"class":_f+"overlay"});
 100  var _12=[this.overlay];
 101  }
 102  this.dragArea=Builder.node("div",{"class":_f+"dragArea"},_12);
 103  this.handleN=Builder.node("div",{"class":_f+"handle "+_f+"handleN"});
 104  this.handleNE=Builder.node("div",{"class":_f+"handle "+_f+"handleNE"});
 105  this.handleE=Builder.node("div",{"class":_f+"handle "+_f+"handleE"});
 106  this.handleSE=Builder.node("div",{"class":_f+"handle "+_f+"handleSE"});
 107  this.handleS=Builder.node("div",{"class":_f+"handle "+_f+"handleS"});
 108  this.handleSW=Builder.node("div",{"class":_f+"handle "+_f+"handleSW"});
 109  this.handleW=Builder.node("div",{"class":_f+"handle "+_f+"handleW"});
 110  this.handleNW=Builder.node("div",{"class":_f+"handle "+_f+"handleNW"});
 111  this.selArea=Builder.node("div",{"class":_f+"selArea"},[Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeNorth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeEast"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeSouth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeWest"},[Builder.node("span")]),this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW,Builder.node("div",{"class":_f+"clickArea"})]);
 112  Element.setStyle($(this.selArea),{backgroundColor:"transparent",backgroundRepeat:"no-repeat",backgroundPosition:"0 0"});
 113  this.imgWrap.appendChild(this.img);
 114  this.imgWrap.appendChild(this.dragArea);
 115  this.dragArea.appendChild(this.selArea);
 116  this.dragArea.appendChild(Builder.node("div",{"class":_f+"clickArea"}));
 117  _10.appendChild(this.imgWrap);
 118  Event.observe(this.dragArea,"mousedown",this.startDrag.bindAsEventListener(this));
 119  Event.observe(document,"mousemove",this.onDrag.bindAsEventListener(this));
 120  Event.observe(document,"mouseup",this.endCrop.bindAsEventListener(this));
 121  var _13=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
 122  for(var i=0;i<_13.length;i++){
 123  Event.observe(_13[i],"mousedown",this.startResize.bindAsEventListener(this));
 124  }
 125  if(this.options.captureKeys){
 126  Event.observe(document,"keydown",this.handleKeys.bindAsEventListener(this));
 127  }
 128  new CropDraggable(this.selArea,{drawMethod:this.moveArea.bindAsEventListener(this)});
 129  this.setParams();
 130  },setParams:function(){
 131  this.imgW=this.img.width;
 132  this.imgH=this.img.height;
 133  if(!this.isIE){
 134  Element.setStyle($(this.overlay),{width:this.imgW+"px",height:this.imgH+"px"});
 135  Element.hide($(this.overlay));
 136  Element.setStyle($(this.selArea),{backgroundImage:"url("+this.img.src+")"});
 137  }else{
 138  Element.setStyle($(this.north),{height:0});
 139  Element.setStyle($(this.east),{width:0,height:0});
 140  Element.setStyle($(this.south),{height:0});
 141  Element.setStyle($(this.west),{width:0,height:0});
 142  }
 143  Element.setStyle($(this.imgWrap),{"width":this.imgW+"px","height":this.imgH+"px"});
 144  Element.hide($(this.selArea));
 145  var _15=Position.positionedOffset(this.imgWrap);
 146  this.wrapOffsets={"top":_15[1],"left":_15[0]};
 147  var _16={x1:0,y1:0,x2:0,y2:0};
 148  this.setAreaCoords(_16);
 149  if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0&&this.options.displayOnInit){
 150  _16.x1=Math.ceil((this.imgW-this.options.ratioDim.x)/2);
 151  _16.y1=Math.ceil((this.imgH-this.options.ratioDim.y)/2);
 152  _16.x2=_16.x1+this.options.ratioDim.x;
 153  _16.y2=_16.y1+this.options.ratioDim.y;
 154  Element.show(this.selArea);
 155  this.drawArea();
 156  this.endCrop();
 157  }
 158  this.attached=true;
 159  },remove:function(){
 160  this.attached=false;
 161  this.imgWrap.parentNode.insertBefore(this.img,this.imgWrap);
 162  this.imgWrap.parentNode.removeChild(this.imgWrap);
 163  Event.stopObserving(this.dragArea,"mousedown",this.startDrag.bindAsEventListener(this));
 164  Event.stopObserving(document,"mousemove",this.onDrag.bindAsEventListener(this));
 165  Event.stopObserving(document,"mouseup",this.endCrop.bindAsEventListener(this));
 166  var _17=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
 167  for(var i=0;i<_17.length;i++){
 168  Event.stopObserving(_17[i],"mousedown",this.startResize.bindAsEventListener(this));
 169  }
 170  if(this.options.captureKeys){
 171  Event.stopObserving(document,"keydown",this.handleKeys.bindAsEventListener(this));
 172  }
 173  },reset:function(){
 174  if(!this.attached){
 175  this.onLoad();
 176  }else{
 177  this.setParams();
 178  }
 179  this.endCrop();
 180  },handleKeys:function(e){
 181  var dir={x:0,y:0};
 182  if(!this.dragging){
 183  switch(e.keyCode){
 184  case (37):
 185  dir.x=-1;
 186  break;
 187  case (38):
 188  dir.y=-1;
 189  break;
 190  case (39):
 191  dir.x=1;
 192  break;
 193  case (40):
 194  dir.y=1;
 195  break;
 196  }
 197  if(dir.x!=0||dir.y!=0){
 198  if(e.shiftKey){
 199  dir.x*=10;
 200  dir.y*=10;
 201  }
 202  this.moveArea([this.areaCoords.x1+dir.x,this.areaCoords.y1+dir.y]);
 203  Event.stop(e);
 204  }
 205  }
 206  },calcW:function(){
 207  return (this.areaCoords.x2-this.areaCoords.x1);
 208  },calcH:function(){
 209  return (this.areaCoords.y2-this.areaCoords.y1);
 210  },moveArea:function(_1b){
 211  this.setAreaCoords({x1:_1b[0],y1:_1b[1],x2:_1b[0]+this.calcW(),y2:_1b[1]+this.calcH()},true);
 212  this.drawArea();
 213  },cloneCoords:function(_1c){
 214  return {x1:_1c.x1,y1:_1c.y1,x2:_1c.x2,y2:_1c.y2};
 215  },setAreaCoords:function(_1d,_1e,_1f,_20,_21){
 216  var _22=typeof _1e!="undefined"?_1e:false;
 217  var _23=typeof _1f!="undefined"?_1f:false;
 218  if(_1e){
 219  var _24=_1d.x2-_1d.x1;
 220  var _25=_1d.y2-_1d.y1;
 221  if(_1d.x1<0){
 222  _1d.x1=0;
 223  _1d.x2=_24;
 224  }
 225  if(_1d.y1<0){
 226  _1d.y1=0;
 227  _1d.y2=_25;
 228  }
 229  if(_1d.x2>this.imgW){
 230  _1d.x2=this.imgW;
 231  _1d.x1=this.imgW-_24;
 232  }
 233  if(_1d.y2>this.imgH){
 234  _1d.y2=this.imgH;
 235  _1d.y1=this.imgH-_25;
 236  }
 237  }else{
 238  if(_1d.x1<0){
 239  _1d.x1=0;
 240  }
 241  if(_1d.y1<0){
 242  _1d.y1=0;
 243  }
 244  if(_1d.x2>this.imgW){
 245  _1d.x2=this.imgW;
 246  }
 247  if(_1d.y2>this.imgH){
 248  _1d.y2=this.imgH;
 249  }
 250  if(typeof (_20)!="undefined"){
 251  if(this.ratioX>0){
 252  this.applyRatio(_1d,{x:this.ratioX,y:this.ratioY},_20,_21);
 253  }else{
 254  if(_23){
 255  this.applyRatio(_1d,{x:1,y:1},_20,_21);
 256  }
 257  }
 258  var _26={a1:_1d.x1,a2:_1d.x2};
 259  var _27={a1:_1d.y1,a2:_1d.y2};
 260  var _28=this.options.minWidth;
 261  var _29=this.options.minHeight;
 262  if((_28==0||_29==0)&&_23){
 263  if(_28>0){
 264  _29=_28;
 265  }else{
 266  if(_29>0){
 267  _28=_29;
 268  }
 269  }
 270  }
 271  this.applyMinDimension(_26,_28,_20.x,{min:0,max:this.imgW});
 272  this.applyMinDimension(_27,_29,_20.y,{min:0,max:this.imgH});
 273  _1d={x1:_26.a1,y1:_27.a1,x2:_26.a2,y2:_27.a2};
 274  }
 275  }
 276  this.areaCoords=_1d;
 277  },applyMinDimension:function(_2a,_2b,_2c,_2d){
 278  if((_2a.a2-_2a.a1)<_2b){
 279  if(_2c==1){
 280  _2a.a2=_2a.a1+_2b;
 281  }else{
 282  _2a.a1=_2a.a2-_2b;
 283  }
 284  if(_2a.a1<_2d.min){
 285  _2a.a1=_2d.min;
 286  _2a.a2=_2b;
 287  }else{
 288  if(_2a.a2>_2d.max){
 289  _2a.a1=_2d.max-_2b;
 290  _2a.a2=_2d.max;
 291  }
 292  }
 293  }
 294  },applyRatio:function(_2e,_2f,_30,_31){
 295  var _32;
 296  if(_31=="N"||_31=="S"){
 297  _32=this.applyRatioToAxis({a1:_2e.y1,b1:_2e.x1,a2:_2e.y2,b2:_2e.x2},{a:_2f.y,b:_2f.x},{a:_30.y,b:_30.x},{min:0,max:this.imgW});
 298  _2e.x1=_32.b1;
 299  _2e.y1=_32.a1;
 300  _2e.x2=_32.b2;
 301  _2e.y2=_32.a2;
 302  }else{
 303  _32=this.applyRatioToAxis({a1:_2e.x1,b1:_2e.y1,a2:_2e.x2,b2:_2e.y2},{a:_2f.x,b:_2f.y},{a:_30.x,b:_30.y},{min:0,max:this.imgH});
 304  _2e.x1=_32.a1;
 305  _2e.y1=_32.b1;
 306  _2e.x2=_32.a2;
 307  _2e.y2=_32.b2;
 308  }
 309  },applyRatioToAxis:function(_33,_34,_35,_36){
 310  var _37=Object.extend(_33,{});
 311  var _38=_37.a2-_37.a1;
 312  var _3a=Math.floor(_38*_34.b/_34.a);
 313  var _3b;
 314  var _3c;
 315  var _3d=null;
 316  if(_35.b==1){
 317  _3b=_37.b1+_3a;
 318  if(_3b>_36.max){
 319  _3b=_36.max;
 320  _3d=_3b-_37.b1;
 321  }
 322  _37.b2=_3b;
 323  }else{
 324  _3b=_37.b2-_3a;
 325  if(_3b<_36.min){
 326  _3b=_36.min;
 327  _3d=_3b+_37.b2;
 328  }
 329  _37.b1=_3b;
 330  }
 331  if(_3d!=null){
 332  _3c=Math.floor(_3d*_34.a/_34.b);
 333  if(_35.a==1){
 334  _37.a2=_37.a1+_3c;
 335  }else{
 336  _37.a1=_37.a1=_37.a2-_3c;
 337  }
 338  }
 339  return _37;
 340  },drawArea:function(){
 341  if(!this.isIE){
 342  Element.show($(this.overlay));
 343  }
 344  var _3e=this.calcW();
 345  var _3f=this.calcH();
 346  var _40=this.areaCoords.x2;
 347  var _41=this.areaCoords.y2;
 348  var _42=this.selArea.style;
 349  _42.left=this.areaCoords.x1+"px";
 350  _42.top=this.areaCoords.y1+"px";
 351  _42.width=_3e+"px";
 352  _42.height=_3f+"px";
 353  var _43=Math.ceil((_3e-6)/2)+"px";
 354  var _44=Math.ceil((_3f-6)/2)+"px";
 355  this.handleN.style.left=_43;
 356  this.handleE.style.top=_44;
 357  this.handleS.style.left=_43;
 358  this.handleW.style.top=_44;
 359  if(this.isIE){
 360  this.north.style.height=this.areaCoords.y1+"px";
 361  var _45=this.east.style;
 362  _45.top=this.areaCoords.y1+"px";
 363  _45.height=_3f+"px";
 364  _45.left=_40+"px";
 365  _45.width=(this.img.width-_40)+"px";
 366  var _46=this.south.style;
 367  _46.top=_41+"px";
 368  _46.height=(this.img.height-_41)+"px";
 369  var _47=this.west.style;
 370  _47.top=this.areaCoords.y1+"px";
 371  _47.height=_3f+"px";
 372  _47.width=this.areaCoords.x1+"px";
 373  }else{
 374  _42.backgroundPosition="-"+this.areaCoords.x1+"px "+"-"+this.areaCoords.y1+"px";
 375  }
 376  this.subDrawArea();
 377  this.forceReRender();
 378  },forceReRender:function(){
 379  if(this.isIE||this.isWebKit){
 380  var n=document.createTextNode(" ");
 381  var d,el,fixEL,i;
 382  if(this.isIE){
 383  fixEl=this.selArea;
 384  }else{
 385  if(this.isWebKit){
 386  fixEl=document.getElementsByClassName("imgCrop_marqueeSouth",this.imgWrap)[0];
 387  d=Builder.node("div","");
 388  d.style.visibility="hidden";
 389  var _4a=["SE","S","SW"];
 390  for(i=0;i<_4a.length;i++){
 391  el=document.getElementsByClassName("imgCrop_handle"+_4a[i],this.selArea)[0];
 392  if(el.childNodes.length){
 393  el.removeChild(el.childNodes[0]);
 394  }
 395  el.appendChild(d);
 396  }
 397  }
 398  }
 399  fixEl.appendChild(n);
 400  fixEl.removeChild(n);
 401  }
 402  },startResize:function(e){
 403  this.startCoords=this.cloneCoords(this.areaCoords);
 404  this.resizing=true;
 405  this.resizeHandle=Element.classNames(Event.element(e)).toString().replace(/([^N|NE|E|SE|S|SW|W|NW])+/,"");
 406  Event.stop(e);
 407  },startDrag:function(e){
 408  Element.show(this.selArea);
 409  this.clickCoords=this.getCurPos(e);
 410  this.setAreaCoords({x1:this.clickCoords.x,y1:this.clickCoords.y,x2:this.clickCoords.x,y2:this.clickCoords.y});
 411  this.dragging=true;
 412  this.onDrag(e);
 413  Event.stop(e);
 414  },getCurPos:function(e){
 415  return curPos={x:Event.pointerX(e)-this.wrapOffsets.left,y:Event.pointerY(e)-this.wrapOffsets.top};
 416  },onDrag:function(e){
 417  var _4f=null;
 418  if(this.dragging||this.resizing){
 419  var _50=this.getCurPos(e);
 420  var _51=this.cloneCoords(this.areaCoords);
 421  var _52={x:1,y:1};
 422  }
 423  if(this.dragging){
 424  if(_50.x<this.clickCoords.x){
 425  _52.x=-1;
 426  }
 427  if(_50.y<this.clickCoords.y){
 428  _52.y=-1;
 429  }
 430  this.transformCoords(_50.x,this.clickCoords.x,_51,"x");
 431  this.transformCoords(_50.y,this.clickCoords.y,_51,"y");
 432  }else{
 433  if(this.resizing){
 434  _4f=this.resizeHandle;
 435  if(_4f.match(/E/)){
 436  this.transformCoords(_50.x,this.startCoords.x1,_51,"x");
 437  if(_50.x<this.startCoords.x1){
 438  _52.x=-1;
 439  }
 440  }else{
 441  if(_4f.match(/W/)){
 442  this.transformCoords(_50.x,this.startCoords.x2,_51,"x");
 443  if(_50.x<this.startCoords.x2){
 444  _52.x=-1;
 445  }
 446  }
 447  }
 448  if(_4f.match(/N/)){
 449  this.transformCoords(_50.y,this.startCoords.y2,_51,"y");
 450  if(_50.y<this.startCoords.y2){
 451  _52.y=-1;
 452  }
 453  }else{
 454  if(_4f.match(/S/)){
 455  this.transformCoords(_50.y,this.startCoords.y1,_51,"y");
 456  if(_50.y<this.startCoords.y1){
 457  _52.y=-1;
 458  }
 459  }
 460  }
 461  }
 462  }
 463  if(this.dragging||this.resizing){
 464  this.setAreaCoords(_51,false,e.shiftKey,_52,_4f);
 465  this.drawArea();
 466  Event.stop(e);
 467  }
 468  },transformCoords:function(_53,_54,_55,_56){
 469  var _57=new Array();
 470  if(_53<_54){
 471  _57[0]=_53;
 472  _57[1]=_54;
 473  }else{
 474  _57[0]=_54;
 475  _57[1]=_53;
 476  }
 477  if(_56=="x"){
 478  _55.x1=_57[0];
 479  _55.x2=_57[1];
 480  }else{
 481  _55.y1=_57[0];
 482  _55.y2=_57[1];
 483  }
 484  },endCrop:function(){
 485  this.dragging=false;
 486  this.resizing=false;
 487  this.options.onEndCrop(this.areaCoords,{width:this.calcW(),height:this.calcH()});
 488  },subInitialize:function(){
 489  },subDrawArea:function(){
 490  }};
 491  Cropper.ImgWithPreview=Class.create();
 492  Object.extend(Object.extend(Cropper.ImgWithPreview.prototype,Cropper.Img.prototype),{subInitialize:function(){
 493  this.hasPreviewImg=false;
 494  if(typeof (this.options.previewWrap)!="undefined"&&this.options.minWidth>0&&this.options.minHeight>0){
 495  this.previewWrap=$(this.options.previewWrap);
 496  this.previewImg=this.img.cloneNode(false);
 497  this.options.displayOnInit=true;
 498  this.hasPreviewImg=true;
 499  Element.addClassName(this.previewWrap,"imgCrop_previewWrap");
 500  Element.setStyle(this.previewWrap,{width:this.options.minWidth+"px",height:this.options.minHeight+"px"});
 501  this.previewWrap.appendChild(this.previewImg);
 502  }
 503  },subDrawArea:function(){
 504  if(this.hasPreviewImg){
 505  var _58=this.calcW();
 506  var _59=this.calcH();
 507  var _5a={x:this.imgW/_58,y:this.imgH/_59};
 508  var _5b={x:_58/this.options.minWidth,y:_59/this.options.minHeight};
 509  var _5c={w:Math.ceil(this.options.minWidth*_5a.x)+"px",h:Math.ceil(this.options.minHeight*_5a.y)+"px",x:"-"+Math.ceil(this.areaCoords.x1/_5b.x)+"px",y:"-"+Math.ceil(this.areaCoords.y1/_5b.y)+"px"};
 510  var _5d=this.previewImg.style;
 511  _5d.width=_5c.w;
 512  _5d.height=_5c.h;
 513  _5d.left=_5c.x;
 514  _5d.top=_5c.y;
 515  }
 516  }});