dzxstatic/js/imgcropper.js

The static files of Discuz! X

!function(){ImgCropper=function(){this.options={opacity:50,color:"",width:0,height:0,resize:!1,right:"",left:"",up:"",down:"",rightDown:"",leftDown:"",rightUp:"",leftUp:"",min:!1,minWidth:50,minHeight:50,scale:!1,ratio:0,Preview:"",viewWidth:0,viewHeight:0},this.setParameter.apply(this,arguments)},ImgCropper.prototype={setParameter:function(t,i,e,s){this._container=$(t),this._layHandle=$(i),this.url=e,this._layBase=this._container.appendChild(document.createElement("img")),this._layCropper=this._container.appendChild(document.createElement("img")),this._layCropper.onload=Util.bindApply(this,this.setPos),this._tempImg=document.createElement("img"),this._tempImg.onload=Util.bindApply(this,this.setSize),this.options=Util.setOptions(this.options,s||{}),this.opacity=Math.round(this.options.opacity),this.color=this.options.color,this.scale=!!this.options.scale,this.ratio=Math.max(this.options.ratio,0),this.width=Math.round(this.options.width),this.height=Math.round(this.options.height),this.setLayHandle=!0;var h=$(this.options.Preview);if(h&&(h.style.position="relative",h.style.overflow="hidden",this.viewWidth=Math.round(this.options.viewWidth),this.viewHeight=Math.round(this.options.viewHeight),this._view=h.appendChild(document.createElement("img")),this._view.style.position="absolute",this._view.onload=Util.bindApply(this,this.SetPreview)),this._drag=new dzDrag(i,{limit:!0,container:t,onDragMove:Util.bindApply(this,this.setPos)}),this.resize=!!this.options.resize,this.resize){var n=this.options,a=new ImgCropperResize(t,{max:!1,scale:!0,min:!0,minWidth:s.minWidth,minHeight:s.minHeight,onResize:Util.bindApply(this,this.scaleImg)});n.rightDown&&a.set(n.rightDown,"right-down"),n.leftDown&&a.set(n.leftDown,"left-down"),n.rightUp&&a.set(n.rightUp,"right-up"),n.leftUp&&a.set(n.leftUp,"left-up"),n.right&&a.set(n.right,"right"),n.left&&a.set(n.left,"left"),n.down&&a.set(n.down,"down"),n.up&&a.set(n.up,"up"),this.min=!!this.options.min,this.minWidth=Math.round(this.options.minWidth),this.minHeight=Math.round(this.options.minHeight),this._resize=a}this._container.style.position="relative",this._container.style.overflow="hidden",this._layHandle.style.zIndex=200,this._layCropper.style.zIndex=100,this._layBase.style.position=this._layCropper.style.position="absolute",this._layBase.style.top=this._layBase.style.left=this._layCropper.style.top=this._layCropper.style.left=0,this.initialize()},initialize:function(){if(this.color&&(this._container.style.backgroundColor=this.color),this._tempImg.src=this._layBase.src=this._layCropper.src=this.url,BROWSER.ie?(this._layBase.style.filter="alpha(opacity:"+this.opacity+")",this._layHandle.style.filter="alpha(opacity:0)",this._layHandle.style.backgroundColor="#FFF"):this._layBase.style.opacity=this.opacity/100,this._view&&(this._view.src=this.url),this.resize)with(this._resize)Scale=this.scale,Ratio=this.ratio,Min=this.min,minWidth=this.minWidth,minHeight=this.minHeight},setPos:function(){if(6==BROWSER.ie)with(this._layHandle.style)zoom=.9,zoom=1;var p=this.getPos();this._layCropper.style.clip="rect("+p.Top+"px "+(p.Left+p.Width)+"px "+(p.Top+p.Height)+"px "+p.Left+"px)",this.SetPreview(),parent.resetHeight(this._container,this.getPos(),this._layBase)},scaleImg:function(){this.height=this._resize._styleHeight,this.width=this._resize._styleWidth,this.initialize(),this.setSize(),this.setPos();var t=(parseInt(this._layHandle.style.left)||0)+(parseInt(this._layHandle.offsetWidth)||0),i=(parseInt(this._layHandle.style.top)||0)+(parseInt(this._layHandle.offsetHeight)||0);if(null!=this._container){if(t>this._container.clientWidth){var e=this._container.clientWidth-this._layHandle.offsetWidth;this._layHandle.style.left=(e<0?0:e)+"px"}if(i>this._container.clientHeight){var s=this._container.clientHeight-this._layHandle.offsetHeight;this._layHandle.style.top=(s<0?0:s)+"px"}}parent.resetHeight(this._container,this.getPos(),this._layBase)},SetPreview:function(){if(this._view){var p=this.getPos(),s=this.getSize(p.Width,p.Height,this.viewWidth,this.viewHeight),scale=s.Height/p.Height,pHeight=this._layBase.height*scale,pWidth=this._layBase.width*scale,pTop=p.Top*scale,pLeft=p.Left*scale;with(this._view.style)width=pWidth+"px",height=pHeight+"px",top=-pTop+"px ",left=-pLeft+"px",clip="rect("+pTop+"px "+(pLeft+s.Width)+"px "+(pTop+s.Height)+"px "+pLeft+"px)"}},setSize:function(){this.width>this._tempImg.width&&(this.width=this._tempImg.width),this.height>this._tempImg.height&&(this.height=this._tempImg.height);var t=this.getSize(this._tempImg.width,this._tempImg.height,this.width,this.height);if(this.options.min&&(t.Width<=this.options.minWidth||t.Height<=this.options.minHeight))return!1;this._layBase.style.width=this._layCropper.style.width=t.Width+"px",this._layBase.style.height=this._layCropper.style.height=t.Height+"px",this._drag.maxRight=t.Width,this._drag.maxBottom=t.Height,this.resize&&(this._container.style.width=this._layBase.style.width,this._container.style.height=this._layBase.style.height,this.setLayHandle&&(this._layHandle.style.left=(t.Width-this._layHandle.offsetWidth)/2+"px",this._layHandle.style.top=(t.Height-this._layHandle.offsetHeight)/2+"px",this.setPos(),this.setLayHandle=!1))},getPos:function(){with(this._layHandle)return{Top:offsetTop,Left:offsetLeft,Width:offsetWidth,Height:offsetHeight}},getSize:function(t,i,e,s){var h=t,n=i,a=h/n;return s&&(h=(n=s)*a),e&&(!s||h>e)&&(n=(h=e)/a),{Width:h,Height:n}}},ImgCropperResize=function(){this.options={max:!1,container:"",maxLeft:0,maxRight:9999,maxTop:0,maxBottom:9999,min:!1,minWidth:50,minHeight:50,scale:!1,ratio:0,onResize:function(){}},this.initialize.apply(this,arguments)},ImgCropperResize.prototype={initialize:function(t,i){this.options=Util.setOptions(this.options,i||{}),this._resizeObj=$(t),this._styleWidth=this._styleHeight=this._styleLeft=this._styleTop=0,this._sideRight=this._sideDown=this._sideLeft=this._sideUp=0,this._fixLeft=this._fixTop=0,this._scaleLeft=this._scaleTop=0,this._maxSet=function(){},this._maxRightWidth=this._maxDownHeight=this._maxUpHeight=this._maxLeftWidth=0,this._maxScaleWidth=this._maxScaleHeight=0,this._fun=function(){};var e=Util.currentStyle(this._resizeObj);this._borderX=(parseInt(e.borderLeftWidth)||0)+(parseInt(e.borderRightWidth)||0),this._borderY=(parseInt(e.borderTopWidth)||0)+(parseInt(e.borderBottomWidth)||0),this._resizeTranscript=Util.bindApply(this,this.resize),this._stopTranscript=Util.bindApply(this,this.stop),this.max=!!this.options.max,this._container=$(this.options.container)||null,this.maxLeft=Math.round(this.options.maxLeft),this.maxRight=Math.round(this.options.maxRight),this.maxTop=Math.round(this.options.maxTop),this.maxBottom=Math.round(this.options.maxBottom),this.min=!!this.options.min,this.minWidth=Math.round(this.options.minWidth),this.minHeight=Math.round(this.options.minHeight),this.scale=!!this.options.scale,this.ratio=Math.max(this.options.ratio,0),this.onResize=this.options.onResize,this._resizeObj.style.position="absolute",!this._container||"relative"==Util.currentStyle(this._container).position||(this._container.style.position="relative")},set:function(t,i){var e;if(t=$(t)){switch(i.toLowerCase()){case"up":e=this.up;break;case"down":e=this.down;break;case"left":e=this.left;break;case"right":e=this.right;break;case"left-up":e=this.leftUp;break;case"right-up":e=this.rightUp;break;case"left-down":e=this.leftDown;break;case"right-down":default:e=this.rightDown}Util.addEventHandler(t,"mousedown",Util.bindApply(this,this.start,e))}},start:function(t,i,e){if(t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,this._fun=i,this._styleWidth=this._resizeObj.clientWidth,this._styleHeight=this._resizeObj.clientHeight,this._styleLeft=this._resizeObj.offsetLeft,this._styleTop=this._resizeObj.offsetTop,this._sideLeft=t.clientX-this._styleWidth,this._sideRight=t.clientX+this._styleWidth,this._sideUp=t.clientY-this._styleHeight,this._sideDown=t.clientY+this._styleHeight,this._fixLeft=this._styleLeft+this._styleWidth,this._fixTop=this._styleTop+this._styleHeight,this.scale&&(this.ratio=Math.max(this.ratio,0)||this._styleWidth/this._styleHeight,this._scaleLeft=this._styleLeft+this._styleWidth/2,this._scaleTop=this._styleTop+this._styleHeight/2),this.max){var s=this.maxLeft,h=this.maxRight,n=this.maxTop,a=this.maxBottom;this._container&&(s=Math.max(s,0),n=Math.max(n,0),h=Math.min(h,this._container.clientWidth),a=Math.min(a,this._container.clientHeight)),h=Math.max(h,s+(this.min?this.minWidth:0)+this._borderX),a=Math.max(a,n+(this.min?this.minHeight:0)+this._borderY),this._mxSet=function(){this._maxRightWidth=h-this._styleLeft-this._borderX,this._maxDownHeight=a-this._styleTop-this._borderY,this._maxUpHeight=Math.max(this._fixTop-n,this.min?this.minHeight:0),this._maxLeftWidth=Math.max(this._fixLeft-s,this.min?this.minWidth:0)},this._mxSet(),this.scale&&(this._maxScaleWidth=2*Math.min(this._scaleLeft-s,h-this._scaleLeft-this._borderX),this._maxScaleHeight=2*Math.min(this._scaleTop-n,a-this._scaleTop-this._borderY))}Util.addEventHandler(document,"mousemove",this._resizeTranscript),Util.addEventHandler(document,"mouseup",this._stopTranscript),BROWSER.ie?(Util.addEventHandler(this._resizeObj,"losecapture",this._stopTranscript),this._resizeObj.setCapture()):(Util.addEventHandler(window,"blur",this._stopTranscript),t.preventDefault())},resize:function(e){if(window.getSelection?window.getSelection().removeAllRanges():document.selection.empty(),this._fun(e),this.options.min&&(this._styleWidth<=this.options.minWidth||this._styleHeight<=this.options.minHeight))return!1;with(this._resizeObj.style)width=this._styleWidth+"px",height=this._styleHeight+"px",top=this._styleTop+"px",left=this._styleLeft+"px";this.onResize()},up:function(t){this.repairY(this._sideDown-t.clientY,this._maxUpHeight),this.repairTop(),this.turnDown(this.down)},down:function(t){this.repairY(t.clientY-this._sideUp,this._maxDownHeight),this.turnUp(this.up)},right:function(t){this.repairX(t.clientX-this._sideLeft,this._maxRightWidth),this.turnLeft(this.left)},left:function(t){this.repairX(this._sideRight-t.clientX,this._maxLeftWidth),this.repairLeft(),this.turnRight(this.right)},rightDown:function(t){this.repairAngle(t.clientX-this._sideLeft,this._maxRightWidth,t.clientY-this._sideUp,this._maxDownHeight),this.turnLeft(this.leftDown)||this.scale||this.turnUp(this.rightUp)},rightUp:function(t){this.repairAngle(t.clientX-this._sideLeft,this._maxRightWidth,this._sideDown-t.clientY,this._maxUpHeight),this.repairTop(),this.turnLeft(this.leftUp)||this.scale||this.turnDown(this.rightDown)},leftDown:function(t){this.repairAngle(this._sideRight-t.clientX,this._maxLeftWidth,t.clientY-this._sideUp,this._maxDownHeight),this.repairLeft(),this.turnRight(this.rightDown)||this.scale||this.turnUp(this.leftUp)},leftUp:function(t){this.repairAngle(this._sideRight-t.clientX,this._maxLeftWidth,this._sideDown-t.clientY,this._maxUpHeight),this.repairTop(),this.repairLeft(),this.turnRight(this.rightUp)||this.scale||this.turnDown(this.leftDown)},repairX:function(t,i){if(t=this.repairWidth(t,i),this.scale){var e=this.repairScaleHeight(t);if(this.max&&e>this._maxScaleHeight)e=this._maxScaleHeight,t=this.repairScaleWidth(e);else if(this.min&&e<this.minHeight){var s=this.repairScaleWidth(this.minHeight);s<i&&(e=this.minHeight,t=s)}this._styleHeight=e,this._styleTop=this._scaleTop-e/2}this._styleWidth=t},repairY:function(t,i){if(t=this.repairHeight(t,i),this.scale){var e=this.repairScaleWidth(t);if(this.max&&e>this._maxScaleWidth)e=this._maxScaleWidth,t=this.repairScaleHeight(e);else if(this.min&&e<this.minWidth){var s=this.repairScaleHeight(this.minWidth);s<i&&(e=this.minWidth,t=s)}this._styleWidth=e,this._styleLeft=this._scaleLeft-e/2}this._styleHeight=t},repairAngle:function(t,i,e,s){if(t=this.repairWidth(t,i),this.scale){if(e=this.repairScaleHeight(t),this.max&&e>s)e=s,t=this.repairScaleWidth(e);else if(this.min&&e<this.minHeight){var h=this.repairScaleWidth(this.minHeight);h<i&&(e=this.minHeight,t=h)}}else e=this.repairHeight(e,s);this._styleWidth=t,this._styleHeight=e},repairTop:function(){this._styleTop=this._fixTop-this._styleHeight},repairLeft:function(){this._styleLeft=this._fixLeft-this._styleWidth},repairHeight:function(t,i){return t=Math.min(this.max?i:t,t),t=Math.max(this.min?this.minHeight:t,t,0)},repairWidth:function(t,i){return t=Math.min(this.max?i:t,t),t=Math.max(this.min?this.minWidth:t,t,0)},repairScaleHeight:function(t){return Math.max(Math.round((t+this._borderX)/this.ratio-this._borderY),0)},repairScaleWidth:function(t){return Math.max(Math.round((t+this._borderY)*this.ratio-this._borderX),0)},turnRight:function(t){if(!this.min&&!this._styleWidth)return this._fun=t,this._sideLeft=this._sideRight,this.max&&this._mxSet(),!0},turnLeft:function(t){if(!this.min&&!this._styleWidth)return this._fun=t,this._sideRight=this._sideLeft,this._fixLeft=this._styleLeft,this.max&&this._mxSet(),!0},turnUp:function(t){if(!this.min&&!this._styleHeight)return this._fun=t,this._sideDown=this._sideUp,this._fixTop=this._styleTop,this.max&&this._mxSet(),!0},turnDown:function(t){if(!this.min&&!this._styleHeight)return this._fun=t,this._sideUp=this._sideDown,this.max&&this._mxSet(),!0},stop:function(){Util.removeEventHandler(document,"mousemove",this._resizeTranscript),Util.removeEventHandler(document,"mouseup",this._stopTranscript),BROWSER.ie?(Util.removeEventHandler(this._resizeObj,"losecapture",this._stopTranscript),this._resizeObj.releaseCapture()):Util.removeEventHandler(window,"blur",this._stopTranscript)}},dzDrag=function(){this.options={handle:"",limit:!1,maxLeft:0,maxRight:9999,maxTop:0,maxBottom:9999,container:"",lockX:!1,lockY:!1,onDragStart:function(){},onDragMove:function(){},onDragEnd:function(){}},this.initialize.apply(this,arguments)},dzDrag.prototype={initialize:function(t,i){this.options=Util.setOptions(this.options,i||{}),this._dragObj=$(t),this._x=this._y=0,this._marginLeft=this._marginTop=0,this._handle=$(this.options.handle)||this._dragObj,this._container=$(this.options.container)||null,this._dragObj.style.position="absolute",this._dragEndTranscript=Util.bindApply(this,this.dragEnd),this._dragMoveTranscript=Util.bindApply(this,this.dragMove),Util.addEventHandler(this._handle,"mousedown",Util.bindApply(this,this.dragStart))},dragStart:function(t){this.setLimit(),this._x=t.clientX-this._dragObj.offsetLeft,this._y=t.clientY-this._dragObj.offsetTop;var i=Util.currentStyle(this._dragObj);this._marginLeft=parseInt(i.marginLeft)||0,this._marginTop=parseInt(i.marginTop)||0,Util.addEventHandler(document,"mousemove",this._dragMoveTranscript),Util.addEventHandler(document,"mouseup",this._dragEndTranscript),BROWSER.ie?(Util.addEventHandler(this._handle,"losecapture",this._dragEndTranscript),this._handle.setCapture()):(Util.addEventHandler(window,"blur",this._dragEndTranscript),t.preventDefault()),this.options.onDragStart()},dragMove:function(t){window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();var i=t.clientX-this._x,e=t.clientY-this._y;if(this.options.limit){var s=this.options.maxLeft,h=this.options.maxRight,n=this.options.maxTop,a=this.options.maxBottom;null!=this._container&&(s=Math.max(s,0),n=Math.max(n,0),h=Math.min(h,this._container.clientWidth),a=Math.min(a,this._container.clientHeight)),i=Math.max(Math.min(i,h-this._dragObj.offsetWidth),s),e=Math.max(Math.min(e,a-this._dragObj.offsetHeight),n)}this.options.lockX||(this._dragObj.style.left=i-this._marginLeft+"px"),this.options.lockY||(this._dragObj.style.top=e-this._marginTop+"px"),this.options.onDragMove()},dragEnd:function(t){Util.removeEventHandler(document,"mousemove",this._dragMoveTranscript),Util.removeEventHandler(document,"mouseup",this._dragEndTranscript),BROWSER.ie?(Util.removeEventHandler(this._handle,"losecapture",this._dragEndTranscript),this._handle.releaseCapture()):Util.removeEventHandler(window,"blur",this._dragEndTranscript),this.options.onDragEnd()},setLimit:function(){this.options.limit&&(this.options.maxRight=Math.max(this.options.maxRight,this.options.maxLeft+this._dragObj.offsetWidth),this.options.maxBottom=Math.max(this.options.maxBottom,this.options.maxTop+this._dragObj.offsetHeight),!this._container||"relative"==Util.currentStyle(this._container).position||"absolute"==Util.currentStyle(this._container).position||(this._container.style.position="relative"))}};var Util={setOptions:function(t,i){for(var e in i)t[e]=i[e];return t},addEventHandler:function(t,i,e){t.addEventListener?t.addEventListener(i,e,!1):t.attachEvent?t.attachEvent("on"+i,e):t["on"+i]=e},removeEventHandler:function(t,i,e){t.removeEventListener?t.removeEventListener(i,e,!1):t.detachEvent?t.detachEvent("on"+i,e):t["on"+i]=null},bindApply:function(t,i){var e=Array.prototype.slice.call(arguments).slice(2);return function(s){return i.apply(t,[s||window.event].concat(e))}},currentStyle:function(t){return t.currentStyle||document.defaultView.getComputedStyle(t,null)}}}();