fe / YOHOOD · Files

Go to a project
jquery.cropzoom.js 12.5 KB
1 2 3 4 5 6 
/**
 * @fileOverview 切图 jquery插件封装
 * @author：Hbomb(zhouqq@yoho.cn)
 * @date：2012-07-26
 */
define("lib/ui/jquery.cropzoom",function($){return(function(K){var X=null,I=null;K.fn.cropzoom=function($){I=K.extend(true,K.fn.cropzoom.defaults,$);return this.each(function(){if(!K.isFunction(K.fn.draggable)||!K.isFunction(K.fn.resizable)||!K.isFunction(K.fn.slider)){alert("You must include ui.draggable, ui.resizable and ui.slider to use cropZoom");return}if(I.image.source==""||I.image.width==0||I.image.height==0){alert("You must set the source, witdth and height of the image element");return}X=K(this);X.empty();X.css({"width":I.width,"height":I.height,"background-color":I.bgColor,"overflow":"hidden","position":"relative","border":"1px solid #666"});N("image",{h:I.image.height,w:I.image.width,posY:0,posX:0,scaleX:0,scaleY:0,rotation:0,source:I.image.source});A();E();Q("image").posX=Math.abs((I.width/2)-(Q("image").w/2));Q("image").posY=Math.abs((I.height/2)-(Q("image").h/2));N("selector",{x:I.selector.x,y:I.selector.y,w:(I.selector.maxWidth!=null?(I.selector.w>I.selector.maxWidth?I.selector.maxWidth:I.selector.w):I.selector.w),h:(I.selector.maxHeight!=null?(I.selector.h>I.selector.maxHeight?I.selector.maxHeight:I.selector.h):I.selector.h)});var C=null,_=null;if(!K.browser.msie){C=X[0].ownerDocument.createElementNS("http://www.w3.org/2000/svg","svg");C.setAttribute("id","k");C.setAttribute("width",I.width);C.setAttribute("height",I.height);C.setAttribute("preserveAspectRatio","none");_=X[0].ownerDocument.createElementNS("http://www.w3.org/2000/svg","image");_.setAttributeNS("http://www.w3.org/1999/xlink","href",I.image.source);_.setAttribute("width",Q("image").w);_.setAttribute("height",Q("image").h);_.setAttribute("id","img_to_crop");_.setAttribute("preserveAspectRatio","none");K(_).attr("x",0);K(_).attr("y",0);C.appendChild(_)}else{X[0].ownerDocument.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML");var $=document.createStyleSheet();$.addRule("v\\:image","behavior: url(#default#VML);display:inline-block");$.addRule("v\\:image","antiAlias: false;");C=K("<div />").attr("id","k").css({"width":I.width,"height":I.height,"position":"absolute"});_=document.createElement("v:image");_.setAttribute("id","img_to_crop");_.setAttribute("src",I.image.source);_.setAttribute("gamma","0");K(_).css({"position":"absolute","left":0,"top":0,"width":Q("image").w,"height":Q("image").h});_.setAttribute("coordsize","21600,21600");_.outerHTML=_.outerHTML;var D=H();if(D=="png"||D=="gif")_.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+I.image.source+"',sizingMethod='scale');";C.append(_)}X.append(C);B();K(K("#img_to_crop"),_).draggable({drag:function(_,$){Q("image").posY=$.position.top;Q("image").posX=$.position.left;B();if(I.onImageDrag!=null)I.onImageDrag(K("#img_to_crop"),Q("image"))}});M();X.find(".ui-icon-gripsmall-diagonal-se").css({"background":"#FFF","border":"1px solid #000","width":8,"height":8});T();if(I.enableZoom)S();if(I.enableRotation)G();return this})};function H(){var $=I.image.source.split(".");return $[$.length-1]}function A(){Q("image").scaleX=parseFloat(I.width/Q("image").w);Q("image").scaleY=parseFloat(I.height/Q("image").h)}function E(){var $=Q("image").scaleX,_=Q("image").scaleY;if(_<$){Q("image").h=I.height;Q("image").w=Math.round(Q("image").w*_)}else{Q("image").h=Math.round(Q("image").h*$);Q("image").w=I.width}}function B(){var _="",$="";if(K.browser.msie){_=Q("image").rotation;K("#img_to_crop").css({"rotation":_,"top":Q("image").posY,"left":Q("image").posX})}else{_="rotate("+Q("image").rotation+","+(Q("image").posX+(Q("image").w/2))+","+(Q("image").posY+(Q("image").h/2))+")";$=" translate("+Q("image").posX+","+Q("image").posY+")";_+=$;K("#img_to_crop").attr("transform",_)}}function G(){var C=K("<div />").css({"position":"absolute","background-color":"#FFF","z-index":3,"opacity":0.6,"width":31,"height":X.height()/2,"top":5,"left":5}).mouseover(function(){K(this).css("opacity",1)}).mouseout(function(){K(this).css("opacity",0.6)}),$=K("<div />").css({"color":"#000","font":"700 11px Arial","margin":"auto","width":10}),_=K("<div />").css({"color":"#000","font":"700 11px Arial","margin":"auto","width":21});$.html("0");_.html("360");var A=K("<div />");A.slider({orientation:"vertical",value:360,min:0,max:360,step:((I.rotationSteps>360||I.rotationSteps<0)?1:I.rotationSteps),slide:function(_,$){Q("image").rotation=Math.abs(360-$.value);B();if(I.onRotate!=null)I.onRotate(K("#img_to_crop"),Q("image").rotation)}});C.append($);C.append(A);C.append(_);A.css({"margin":" 7px auto","height":(X.height()/2)-60,"position":"relative","width":7});X.append(C)}function S(){var $=K("<div />").css({"position":"absolute","background-color":"#FFF","z-index":3,"opacity":0.6,"width":31,"height":(X.height()/2),"top":5,"right":5}).mouseover(function(){K(this).css("opacity",1)}).mouseout(function(){K(this).css("opacity",0.6)}),C=K("<div />").css({"color":"#000","font":"700 14px Arial","margin":"auto","width":"100%","text-align":"center"}).html("<b>-</b>"),D=K("<div />").css({"color":"#000","font":"700 14px Arial","margin":"auto","width":"100%","text-align":"center"}).html("<b>+</b>"),_=K("<div />");_.slider({orientation:"vertical",value:L(),min:I.image.minZoom,max:I.image.maxZoom,step:((I.zoomSteps>I.image.maxZoom||I.zoomSteps<0)?1:I.zoomSteps),slide:function(_,$){var C=((I.image.width*Math.abs($.value))/100),D=((I.image.height*Math.abs($.value))/100);if(!K.browser.msie){K("#img_to_crop").attr("width",C+"px");K("#img_to_crop").attr("height",D+"px")}else K("#img_to_crop").css({"width":C+"px","height":D+"px"});Q("image").w=C;Q("image").h=D;A();Q("image").posX=((I.width/2)-(Q("image").w/2));Q("image").posY=((I.height/2)-(Q("image").h/2));B();if(I.onZoom!=null)I.onZoom(K("#img_to_crop"),Q("image"))}});$.append(D);$.append(_);$.append(C);_.css({"margin":" 7px auto","height":(X.height()/2)-60,"width":7,"position":"relative"});X.append($)}function L(){var $=0;if(Q("image").w>Q("image").h)$=((Q("image").w*100)/I.image.width);else $=((Q("image").h*100)/I.image.height);return $}function M(){if(I.selector.centered){Q("selector").y=(I.height/2)-(Q("selector").h/2);Q("selector").x=(I.width/2)-(Q("selector").w/2)}var $=K("<div />").attr("id","selector").css({"width":Q("selector").w,"height":Q("selector").h,"top":Q("selector").y+"px","left":Q("selector").x+"px","border":"1px dashed "+I.selector.borderColor,"position":"absolute","cursor":"move"}).mouseover(function(){K(this).css({"border":"1px dashed "+I.selector.borderColorHover})}).mouseout(function(){K(this).css({"border":"1px dashed "+I.selector.borderColor})});$.draggable({containment:X,iframeFix:true,refreshPositions:true,drag:function(A,_){Q("selector").x=_.position.left;Q("selector").y=_.position.top;D(_);P($);if(I.onSelectorDrag!=null)I.onSelectorDrag($,Q("selector"))},stop:function(A,_){C();if(I.onSelectorDragStop!=null)I.onSelectorDragStop($,Q("selector"))}});$.resizable({aspectRatio:I.selector.aspectRatio,maxHeight:I.selector.maxHeight,maxWidth:I.selector.maxWidth,minHeight:I.selector.h,minWidth:I.selector.w,containment:"parent",resize:function(A,_){Q("selector").w=$.width();Q("selector").h=$.height();D(_);P($);if(I.onSelectorResize!=null)I.onSelectorResize($,Q("selector"))},stop:function(A,_){C();if(I.onSelectorResizeStop!=null)I.onSelectorResizeStop($,Q("selector"))}});P($);X.append($)}function P($){var _=null,A=false;if($.find("#infoSelector").length>0)_=$.find("#infoSelector");else _=K("<div />").attr("id","infoSelector").css({"position":"absolute","top":0,"left":0,"background":I.selector.bgInfoLayer,"opacity":0.6,"font-size":I.selector.infoFontSize+"px","font-family":"Arial","color":I.selector.infoFontColor,"width":"100%"});if(I.selector.showDimetionsOnDrag){_.html("X:"+Q("selector").x+"px - Y:"+Q("selector").y+"px");A=true}if(I.selector.showPositionsOnDrag)if(A)_.html(_.html()+" | W:"+Q("selector").w+"px - H:"+Q("selector").h+"px");else _.html("W:"+Q("selector").w+"px - H:"+Q("selector").h+"px");$.append(_)}function T(){var $=["t","b","l","r"];K.each($,function(){var $=K("<div />").attr("id",this).css({"overflow":"hidden","background":I.overlayColor,"opacity":0.6,"position":"absolute","z-index":2,"visibility":"visible"});X.append($)})}function D($){K("#t").css({"display":"block","width":I.width,"height":$.position.top,"left":0,"top":0});K("#b").css({"display":"block","width":I.width,"height":I.height,"top":($.position.top+K("#selector").height())+"px","left":0});K("#l").css({"display":"block","left":0,"top":$.position.top,"width":$.position.left,"height":K("#selector").height()});K("#r").css({"display":"block","top":$.position.top,"left":($.position.left+K("#selector").width())+"px","width":I.width,"height":K("#selector").height()+"px"})}function C(){K("#t,#b,#l,#r").hide()}function N(_,$){X.data(_,$)}function Q($){return X.data($)}var _=K.fn.addClass;K.fn.addClass=function($){$=$||"";return this.each(function(){if(U(this)){var A=this;K.each($.split(/\s+/),function(B,_){var $=(A.className?A.className.baseVal:A.getAttribute("class"));if(K.inArray(_,$.split(/\s+/))==-1){$+=($?" ":"")+_;(A.className?A.className.baseVal=$:A.setAttribute("class",$))}})}else _.apply(K(this),[$])})};var W=K.fn.removeClass;K.fn.removeClass=function($){$=$||"";return this.each(function(){if(U(this)){var _=this;K.each($.split(/\s+/),function(B,A){var $=(_.className?_.className.baseVal:_.getAttribute("class"));$=K.grep($.split(/\s+/),function($,_){return $!=A}).join(" ");(_.className?_.className.baseVal=$:_.setAttribute("class",$))})}else W.apply(K(this),[$])})};var $=K.fn.toggleClass;K.fn.toggleClass=function(A,_){return this.each(function(){if(U(this)){if(typeof _!=="boolean")_=!K(this).hasClass(A);K(this)[(_?"add":"remove")+"Class"](A)}else $.apply(K(this),[A,_])})};var R=K.fn.hasClass;K.fn.hasClass=function($){$=$||"";var _=false;this.each(function(){if(U(this)){var A=(this.className?this.className.baseVal:this.getAttribute("class")).split(/\s+/);_=(K.inArray($,A)>-1)}else _=(R.apply(K(this),[$]));return!_});return _};var F=K.fn.attr;K.fn.attr=function(_,A,B){if(typeof _==="string"&&A===undefined){var $=F.apply(this,[_,A,B]);return($&&$.baseVal?$.baseVal.valueAsString:$)}var C=_;if(typeof _==="string"){C={};C[_]=A}return this.each(function(){if(U(this)){for(var $ in C)this.setAttribute($,(typeof C[$]=="function"?C[$]():C[$]))}else F.apply(K(this),[_,A,B])})};var V=K.fn.removeAttr;K.fn.removeAttr=function($){return this.each(function(){if(U(this))(this[$]&&this[$].baseVal?this[$].baseVal.value="":this.setAttribute($,""));else V.apply(K(this),[$])})};function U($){return($.nodeType==1&&$.namespaceURI=="http://www.w3.org/2000/svg")}function O(B){var A=Q("image"),$=Q("selector"),_={"viewPortW":X.width(),"viewPortH":X.height(),"imageX":A.posX,"imageY":A.posY,"imageRotate":A.rotation,"imageW":A.w,"imageH":A.h,"imageSource":A.source,"selectorX":$.x,"selectorY":$.y,"selectorW":$.w,"selectorH":$.h};return K.extend(_,B)}function J(_){var $=[];if(typeof _=="string")return"\""+_.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";if(typeof _=="undefined")return"";if(typeof _=="object"){if(_===null)return"null";else if(!_.sort){for(var A in _)$.push(A+":"+J(_[A]));$="{"+$.join()+"}"}else{for(A=0;A<_.length;A++)$.push(J(_[A]));$="["+$.join()+"]"}return $}return _.toString()}K.fn.cropzoom.defaults={width:500,height:375,bgColor:"#000",overlayColor:"#000",selector:{x:0,y:0,w:229,h:100,aspectRatio:false,centered:false,borderColor:"yellow",borderColorHover:"red",bgInfoLayer:"#FFF",infoFontSize:10,infoFontColor:"blue",showPositionsOnDrag:true,showDimetionsOnDrag:true,maxHeight:null,maxWidth:null},image:{source:"",rotation:0,width:0,height:0,minZoom:10,maxZoom:150},enableRotation:true,enableZoom:true,zoomSteps:1,rotationSteps:5,onSelectorDrag:null,onSelectorDragStop:null,onSelectorResize:null,onSelectorResizeStop:null,onZoom:null,onRotate:null,onImageDrag:null};K.fn.extend({setSelector:function(C,B,$,A,_){if(_!=undefined&&_==true)K("#selector").animate({"top":B,"left":C,"width":$,"height":A},"slow");else K("#selector").css({"top":B,"left":C,"width":$,"height":A});N("selector",{x:C,y:B,w:$,h:A})},restore:function(){X.empty();N("image",{});N("selector",{});X.cropzoom(I)},getSendData:function(_){var $=O(_);K("#image_h").val($.imageH);K("#image_w").val($.imageW);K("#image_rotate").val($.imageRotate);K("#image_x").val($.imageX);K("#image_y").val($.imageY);K("#selector_h").val($.selectorH);K("#selector_w").val($.selectorW);K("#selector_x").val($.selectorX);K("#selector_y").val($.selectorY);K("#view_port_h").val($.viewPortH);K("#view_port_w").val($.viewPortW);return true},send:function(B,A,C,_){var $="";K.ajax({url:B,type:A,data:(O(C)),success:function($){N("imageResult",$);if(_!==undefined&&_!=null)_($)}})}})})})