分享一下我刚开发的jQuery插件,圖片切割效果,如果需要和我討論請來這裡 http://hi.baidu.com/see7di/home
效果预览:
22.gif   
源码:欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>http://hi.baidu.com/see7di/home</title>
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件

//如果需要和我討論請來這裡 http://hi.baidu.com/see7di/home
(function($){
$.Jcrop=function(obj,opt){
    var obj=obj,opt=opt;
    if(typeof(obj)!=='object'){obj=$(obj)[0]}
    if(typeof(opt)!=='object'){opt={}}
    if(!('advBrowser' in opt)){
        opt.advBrowser=$.browser.msie?false:true;
        if($.browser.msie && $.browser.version.split('.')[0]=='8'){opt.advBrowser=true;}
    }
    if(!('keySupport' in opt)){opt.keySupport=$.browser.msie?false:true;}
    var _opt={
        xlineImg:            '',            //產生虛線效果的圖片
        Opacity:            .6,            //虛線和遮罩層的透明度
        keepRatio:            0,            //縮放時是否保持比例
        boxWidth:            0,            //盒子寬度
        boxHeight:            0,            //盒子高度
        canSelect:            false,        //是否允許建立新選區(如果是true則點擊鼠標選區就消失了)
        canMove:            true,        //是否允許拖動選區
        canResize:            true,        //是否允許修改選區
        drawBorders:        true,        //是否顯示虛線選區
        sideHandles:        true,        //是否顯示線中間的控制點
        advBrowser:        false,        //false:IE8以下;true:Other
        keySupport:            true,        //false:IE8以下;true:Other
        minSelect:            [0,0],        //最小選擇多少選區就自動消失
        minSize:            [100,100],    //選區的最小值
        maxSize:            [0,0],        //選區的最大值
       
        onChange:function(){},onSelect:function(){}//Callback
    };
    setOpt(opt);
    var $boximg=$(obj);
    var $img=$boximg.clone().removeAttr('id').css({position:'absolute'});
    $img.width($boximg.width());
    $img.height($boximg.height());
    $boximg.after($img).hide();
    presize($img,_opt.boxWidth,_opt.boxHeight);
    var boundx=$img.width(),boundy=$img.height();
    var $div=$('<div />').width(boundx).height(boundy).css({position:'relative','text-align':'left',backgroundColor:'black'}).insertAfter($boximg).append($img);
    $div.before("<style type='text/css'>"+
        ".jcrop-vline,.jcrop-hline{font-size:0;position:absolute;background:white url('"+_opt.xlineImg+"') 0 0 repeat;}"+
        ".jcrop-vline{height:100%;width:1px !important;}.jcrop-hline{width:100%;height:1px !important;}"+
        ".jcrop-handle{font-size:1px;width:7px !important;height:7px !important;border:1px #FFF solid;background-color:#000;}"+
        ".custom .jcrop-handle{border-color:black;background-color:#111;-moz-border-radius:3px;-webkit-border-radius:3px;}"+
        "</style>"
    );
    var $img2=$('<img />').attr('src',$img.attr('src')).css('position','absolute').width(boundx).height(boundy);
    var $img_holder=$('<div />').width(pct(100)).height(pct(100)).css({zIndex:310,position:'absolute',overflow:'hidden'}).append($img2);
    var $hdl_holder=$('<div />').width(pct(100)).height(pct(100)).css('zIndex',320);
    var $sel=$('<div />').css({position:'absolute',zIndex:300}).insertBefore($img).append($img_holder,$hdl_holder);
    var bound=8;
    var $trk=newTracker().width(boundx+(bound*2)).height(boundy+(bound*2)).css({position:'absolute',top:px(-bound),left:px(-bound),zIndex:290}).mousedown(newSelection);   
    var xlimit,ylimit,xmin,ymin;
    var xscale,yscale,enabled=true;
    var docOffset=getPos($img),btndown,lastcurs,dimmed,animating,shift_down;
    var Coords=function(){
        var x1=0,y1=0,x2=0,y2=0,ox,oy;
        function setPressed(pos){
            var pos=rebound(pos);
            x2=x1=pos[0];
            y2=y1=pos[1];
        };
        function setCurrent(pos){
            var pos=rebound(pos);
            ox=pos[0]-x2;
            oy=pos[1]-y2;
            x2=pos[0];
            y2=pos[1];
        };
        function getOffset(){return [ox,oy];};
        function moveOffset(offset){
            var ox=offset[0],oy=offset[1];
            if(0>x1+ox){ox-=ox+x1;}
            if(0>y1+oy){oy-=oy+y1;}
            if(boundy<y2+oy){oy+=boundy-(y2+oy)};
            if(boundx<x2+ox){ox+=boundx-(x2+ox)};
            x1+=ox;
            x2+=ox;
            y1+=oy;
            y2+=oy;
        };
        function getCorner(ord){
            var c=getFixed();
            switch(ord){
                case 'ne':return [c.x2,c.y];
                case 'nw':return [c.x,c.y];
                case 'se':return [c.x2,c.y2];
                case 'sw':return [c.x,c.y2];
            }
        };
        function getFixed(){//This function could use some optimization I think...
            if(!_opt.keepRatio){return getRect()};
            var aspect=_opt.keepRatio,
                min_x=_opt.minSize[0]/xscale,
                min_y=_opt.minSize[1]/yscale,
                max_x=_opt.maxSize[0]/xscale,
                max_y=_opt.maxSize[1]/yscale,
                rw=x2-x1,
                rh=y2-y1,
                rwa=Math.abs(rw),
                rha=Math.abs(rh),
                real_ratio=rwa/rha,
                xx,yy;
            if(max_x==0){max_x=boundx*10}
            if(max_y==0){max_y=boundy*10}
            if(real_ratio<aspect){
                yy=y2;
                w=rha*aspect;
                xx=rw<0?x1-w:w+x1;
                if(xx<0){
                    xx=0;
                    h=Math.abs((xx-x1)/aspect);
                    yy=rh<0?y1-h:h+y1;
                }else if(xx>boundx){
                    xx=boundx;
                    h=Math.abs((xx-x1)/aspect);
                    yy=rh<0?y1-h:h+y1;
                }
            }else{
                xx=x2;
                h=rwa/aspect;
                yy=rh<0?y1-h:y1+h;
                if(yy<0){
                    yy=0;
                    w=Math.abs((yy-y1)*aspect);
                    xx=rw<0?x1-w:w+x1;
                }else if(yy>boundy){
                    yy=boundy;
                    w=Math.abs(yy-y1)*aspect;
                    xx=rw<0?x1-w:w+x1;
                }
            }
            if(xx>x1){//Magic//right side
                if(xx-x1<min_x){
                    xx=x1+min_x;
                }else if(xx-x1>max_x){
                    xx=x1+max_x;
                }
                if(yy>y1){
                    yy=y1+(xx-x1)/aspect;
                }else{
                    yy=y1-(xx-x1)/aspect;
                }
            }else if(xx<x1){//left side
                if(x1-xx<min_x){
                    xx=x1-min_x
                }else if(x1-xx>max_x){
                    xx=x1-max_x;
                }
                if(yy>y1){
                    yy=y1+(x1-xx)/aspect;
                }else{
                    yy=y1-(x1-xx)/aspect;
                }
            }
            if(xx<0){
                x1-=xx;
                xx=0;
            }else if(xx>boundx){
                x1-=xx-boundx;
                xx=boundx;
            }
            if(yy<0){
                y1-=yy;
                yy=0;
            }else  if(yy>boundy){
                y1-=yy-boundy;
                yy=boundy;
            }
            return last=makeObj(flipCoords(x1,y1,xx,yy));
        };
        function rebound(p){
            if(p[0]<0){p[0]=0}
            if(p[1]<0){p[1]=0}
            if(p[0]>boundx){p[0]=boundx}
            if(p[1]>boundy){p[1]=boundy}
            return [p[0],p[1]];
        };
        function flipCoords(x1,y1,x2,y2){
            var xa=x1,xb=x2,ya=y1,yb=y2;
            if(x2<x1){xa=x2;xb=x1;}
            if(y2<y1){ya=y2;yb=y1;}
            return [Math.round(xa),Math.round(ya),Math.round(xb),Math.round(yb)];
        };
        function getRect(){
            var xsize=x2-x1;
            var ysize=y2-y1;
            if(xlimit && (Math.abs(xsize)>xlimit)){x2=(xsize>0)?(x1+xlimit):(x1-xlimit);}
            if(ylimit && (Math.abs(ysize)>ylimit)){y2=(ysize>0)?(y1+ylimit):(y1-ylimit);}
            if(ymin && (Math.abs(ysize)<ymin)){y2=(ysize>0)?(y1+ymin):(y1-ymin);}
            if(xmin && (Math.abs(xsize)< xmin)){x2=(xsize>0)?(x1+xmin):(x1-xmin);}
            if(x1<0){x2-=x1;x1-=x1;}
            if(y1<0){y2-=y1;y1-=y1;}
            if(x2<0){x1-=x2;x2-=x2;}
            if(y2<0){y1-=y2;y2-=y2;}
            if(x2>boundx){var delta=x2-boundx;x1-=delta;x2-=delta;}
            if(y2>boundy){var delta=y2-boundy;y1-=delta;y2-=delta;}
            if(x1>boundx){var delta=x1-boundy;y2-=delta;y1-=delta;}
            if(y1>boundy){var delta=y1-boundy;y2-=delta;y1-=delta;}
            return makeObj(flipCoords(x1,y1,x2,y2));
        };
        function makeObj(a){
            return{x:a[0],y:a[1],x2:a[2],y2:a[3],w:a[2]-a[0],h:a[3]-a[1]};
        };
        return{flipCoords:flipCoords,setPressed:setPressed,setCurrent:setCurrent,getOffset:getOffset,moveOffset:moveOffset,getCorner:getCorner,getFixed:getFixed};
    }();
    var Selection=function(){
        var start,end,dragmode,awake,hdep=370;
        var borders={};
        var handle={};
        var seehandles=false;
        var hhs=5;//熱點偏移位置
        //Insert draggable elements//Insert border divs for outline
        if(_opt.drawBorders){
            borders={top:insertBorder('hline').css('top',px(0)),bottom:insertBorder('hline'),left:insertBorder('vline'),right:insertBorder('vline')};
        }
        //Insert handles on edges
        //handle.t=insertDragbar('n');
        //handle.b=insertDragbar('s');
        //handle.r=insertDragbar('e');
        //handle.l=insertDragbar('w');
        _opt.sideHandles && createHandles(['n','s','e','w']);
        createHandles(['sw','nw','ne','se']);//插入四個角的控制點
        function insertBorder(type){
            var jq=$('<div />').css({position:'absolute',opacity:_opt.Opacity}).addClass(cssClass(type));
            $img_holder.append(jq);
            return jq;
        };
        function dragDiv(ord,zi){
            var jq=$('<div />').mousedown(createDragger(ord)).css({cursor:ord+'-resize',position:'absolute',zIndex:zi});
            $hdl_holder.append(jq);
            return jq;
        };
        function insertHandle(ord){
            return dragDiv(ord,hdep++).css({top:px(-hhs+1),left:px(-hhs+1),opacity:_opt.Opacity}).addClass(cssClass('handle'));
        };
        function insertDragbar(ord){
            var s=9,o=hhs,h=s,w=s,t=o,l=o;
            switch(ord){
                case 'n':case 's':w=pct(100);break;
                case 'e':case 'w':h=pct(100);break;
            }
            return dragDiv(ord,hdep++).width(w).height(h).css({top:px(-t+1),left:px(-l+1)});
        };
        function createHandles(li){for(i in li){handle[li[i]]=insertHandle(li[i])}};
        function moveHandles(c){
            var midvert=Math.round((c.h/2)- hhs),midhoriz=Math.round((c.w/2)- hhs),north=west=-hhs+1,east=c.w-hhs,south=c.h-hhs,x,y;
            'e' in handle && handle.e.css({top:px(midvert),left:px(east)}) && handle.w.css({top:px(midvert)}) && handle.s.css({top:px(south),left:px(midhoriz)}) && handle.n.css({left:px(midhoriz)});
            'ne' in handle && handle.ne.css({left:px(east)}) && handle.se.css({top:px(south),left:px(east)}) && handle.sw.css({top:px(south)});
            'b' in handle && handle.b.css({top:px(south)}) && handle.r.css({left:px(east)});
        };
        function moveto(x,y){$img2.css({top:px(-y),left:px(-x)});$sel.css({top:px(y),left:px(x)});};
        function resize(w,h){$sel.width(w).height(h);};
        function refresh(){
            var c=Coords.getFixed();
            Coords.setPressed([c.x,c.y]);
            Coords.setCurrent([c.x2,c.y2]);
            updateVisible();
        };
        //Internal Methods
        function updateVisible(){if(awake){return update()}}
        function update(){
            var c=Coords.getFixed();
            resize(c.w,c.h);
            moveto(c.x,c.y);
            _opt.drawBorders && borders['right'].css({left:px(c.w-1)}) && borders['bottom'].css({top:px(c.h-1)});
            seehandles && moveHandles(c);
            awake || show();
            _opt.onChange(unscale(c));
        };
        function show(){
            $sel.show();
            $img.css('opacity',_opt.Opacity);
            awake=true;
        };
        function release(){
            disableHandles();
            $sel.hide();
            $img.css('opacity',1);
            awake=false;
        };
        function showHandles(){if(seehandles){moveHandles(Coords.getFixed());$hdl_holder.show();}};
        function enableHandles(){
            seehandles=true;
            if(_opt.canResize){
                moveHandles(Coords.getFixed());
                $hdl_holder.show();
                return true;
            }
        };
        function disableHandles(){seehandles=false;$hdl_holder.hide();};
        function animMode(v){(animating=v)?disableHandles():enableHandles();};
        function done(){animMode(false);refresh();};
        var $track=newTracker().mousedown(createDragger('move')).css({cursor:'move',position:'absolute',zIndex:360});
        $img_holder.append($track);
        disableHandles();
        return{
            updateVisible:updateVisible,update:update,release:release,refresh:refresh,setCursor:function(cursor){$track.css('cursor',cursor);},enableHandles:enableHandles,
            enableOnly:function(){seehandles=true;},showHandles:showHandles,disableHandles:disableHandles,animMode:animMode,done:done
        };
    }();
    var Tracker=function(){
        var onMove=function(){},onDone=function(){},trackDoc=_opt.advBrowser;
        if(!trackDoc){$trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);}
        function toFront(){
            $trk.css({zIndex:450});
            if(trackDoc){$(document).mousemove(trackMove).mouseup(trackUp);}
        }
        function toBack(){
            $trk.css({zIndex:290});
            if(trackDoc){$(document).unbind('mousemove',trackMove).unbind('mouseup',trackUp);}
        }
        function trackMove(e){onMove(mouseAbs(e));};
        function trackUp(e){
            e.preventDefault();
            e.stopPropagation();
            if(btndown){
                btndown=false;
                onDone(mouseAbs(e));
                _opt.onSelect(unscale(Coords.getFixed()));
                toBack();
                onMove=function(){};
                onDone=function(){};
            }
            return false;
        };
        function activateHandlers(move,done){
            btndown=true;
            onMove=move;
            onDone=done;
            toFront();
            return false;
        };
        function setCursor(t){$trk.css('cursor',t);};
        $img.before($trk);
        return{activateHandlers:activateHandlers,setCursor:setCursor};
    }();
    var KeyManager=function(){
        var $keymgr=$('<input type="radio" />').css({position:'absolute',left:'-30px'}).keypress(parseKey).blur(onBlur),$keywrap=$('<div />').css({position:'absolute',overflow:'hidden'}).append($keymgr);
        function watchKeys(){
            if(_opt.keySupport){$keymgr.show();$keymgr.focus();}
        };
        function onBlur(e){$keymgr.hide();};
        function doNudge(e,x,y){
            if(_opt.canMove){
                Coords.moveOffset([x,y]);
                Selection.updateVisible();
            };
            e.preventDefault();
            e.stopPropagation();
        };
        function parseKey(e){
            if(e.ctrlKey){return true}
            shift_down=e.shiftKey?true:false;
            var nudge=shift_down?10:1;
            switch(e.keyCode){
                case 37:doNudge(e,-nudge,0);break;
                case 39:doNudge(e,nudge,0);break;
                case 38:doNudge(e,0,-nudge);break;
                case 40:doNudge(e,0,nudge);break;
                case 27:Selection.release();break;
                case 9:return true;
            }
            return nothing(e);
        };
        if(_opt.keySupport){$keywrap.insertBefore($img)}
        return{watchKeys:watchKeys};
    }();
    //Internal Methods
    function px(n){return ''+parseInt(n)+'px';};
    function pct(n){return ''+parseInt(n)+'%';};
    function cssClass(cl){return 'jcrop-'+cl;};
    function getPos(obj){//Updated in v0.9.4 to use built-in dimensions plugin
        var pos=$(obj).offset();
        return [pos.left,pos.top];
    };
    function mouseAbs(e){
        return [(e.pageX-docOffset[0]),(e.pageY-docOffset[1])];
    };
    function setOpt(opt){
        if(typeof(opt)!='object'){opt={}}
        _opt=$.extend(_opt,opt);
        if(typeof(_opt.onChange)!=='function'){_opt.onChange=function(){};}
        if(typeof(_opt.onSelect)!=='function'){_opt.onSelect=function(){};}
    };
    function myCursor(type){
        if(type!=lastcurs){
            Tracker.setCursor(type);
            //Handles.xsetCursor(type);
            lastcurs=type;
        }
    };
    function startDragMode(mode,pos){
        docOffset=getPos($img);
        Tracker.setCursor(mode=='move'?mode:mode+'-resize');
        if(mode=='move'){return Tracker.activateHandlers(createMover(pos),doneSelect);}
        var fc=Coords.getFixed();
        var opp=oppLockCorner(mode);
        var opc=Coords.getCorner(oppLockCorner(opp));
        Coords.setPressed(Coords.getCorner(opp));
        Coords.setCurrent(opc);
        Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect);
    };
    function dragmodeHandler(mode,f){
        return function(pos){
            if(!_opt.keepRatio){
                switch(mode){
                    case 'e':pos[1]=f.y2;break;
                    case 'w':pos[1]=f.y2;break;
                    case 'n':pos[0]=f.x2;break;
                    case 's':pos[0]=f.x2;break;
                }
            }else{
                switch(mode){
                    case 'e':pos[1]=f.y+1;break;
                    case 'w':pos[1]=f.y+1;break;
                    case 'n':pos[0]=f.x+1;break;
                    case 's':pos[0]=f.x+1;break;
                }
            }
            Coords.setCurrent(pos);
            Selection.update();
        };
    };
    function createMover(pos){
        var lloc=pos;
        KeyManager.watchKeys();
        return function(pos){
            Coords.moveOffset([pos[0]-lloc[0],pos[1]-lloc[1]]);
            lloc=pos;
            Selection.update();
        };
    };
    function oppLockCorner(ord){
        switch(ord){
            case 'n':return 'sw';
            case 's':return 'nw';
            case 'e':return 'nw';
            case 'w':return 'ne';
            case 'ne':return 'sw';
            case 'nw':return 'se';
            case 'se':return 'nw';
            case 'sw':return 'ne';
        };
    };
    function createDragger(ord){
        return function(e){
            if(_opt.disabled){return false}
            if((ord=='move') && !_opt.canMove){return false}
            btndown=true;
            startDragMode(ord,mouseAbs(e));
            e.stopPropagation();
            e.preventDefault();
            return false;
        };
    };
    function presize($obj,w,h){
        var nw=$obj.width(),nh=$obj.height();
        if((nw>w) && w>0){nw=w;nh=(w/$obj.width())*$obj.height();}
        if((nh>h) && h>0){nh=h;nw=(h/$obj.height())*$obj.width();}
        xscale=$obj.width()/nw;
        yscale=$obj.height()/nh;
        $obj.width(nw).height(nh);
    };
    function unscale(c){
        return{x:parseInt(c.x*xscale),y:parseInt(c.y*yscale),x2:parseInt(c.x2*xscale),y2:parseInt(c.y2*yscale),w:parseInt(c.w*xscale),h:parseInt(c.h*yscale)};
    };
    function doneSelect(pos){
        var c=Coords.getFixed();
        if(c.w>_opt.minSelect[0] && c.h>_opt.minSelect[1]){
            Selection.enableHandles();
            Selection.done();
        }else{
            Selection.release();
        }
        Tracker.setCursor(_opt.canSelect?'crosshair':'default');
    };
    function newSelection(e){
        if(_opt.disabled){return false}
        if(!_opt.canSelect){return false}
        btndown=true;
        docOffset=getPos($img);
        Selection.disableHandles();
        myCursor('crosshair');
        var pos=mouseAbs(e);
        Coords.setPressed(pos);
        Tracker.activateHandlers(selectDrag,doneSelect);
        KeyManager.watchKeys();
        Selection.update();
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
    function selectDrag(pos){Coords.setCurrent(pos);Selection.update();};
    function newTracker(){
        var trk=$('<div></div>').css({'width':'100%','height':'100%'});
        $.browser.msie && trk.css({opacity:0,backgroundColor:'white'});
        return trk;
    };
    //API methods
    function animateTo(a){
        var x1=a[0]/xscale,y1=a[1]/yscale,x2=a[2]/xscale,y2=a[3]/yscale;
        if(animating){return;}
        var animto=Coords.flipCoords(x1,y1,x2,y2);
        var c=Coords.getFixed();
        var animat=initcr=[c.x,c.y,c.x2,c.y2];
        var interv=20;    //延遲時間
        var x=animat[0];
        var y=animat[1];
        var x2=animat[2];
        var y2=animat[3];
        var ix1=animto[0]-initcr[0];
        var iy1=animto[1]-initcr[1];
        var ix2=animto[2]-initcr[2];
        var iy2=animto[3]-initcr[3];
        var pcent=0;
        Selection.animMode(true);
        var animator=function(){
            return function(){
                pcent+=(100-pcent)/3;
                animat[0]=x+((pcent/100)*ix1);
                animat[1]=y+((pcent/100)*iy1);
                animat[2]=x2+((pcent/100)*ix2);
                animat[3]=y2+((pcent/100)*iy2);
                if(pcent<100){animateStart();}else{Selection.done();}
                if(pcent>=99.8){pcent=100;}
                setSelectRaw(animat);
            };
        }();
        function animateStart(){window.setTimeout(animator,interv)};
        animateStart();
    };
    function setSelect(rect){
        setSelectRaw([rect[0]/xscale,rect[1]/yscale,rect[2]/xscale,rect[3]/yscale]);
    };
    function setSelectRaw(l){
        Coords.setPressed([l[0],l[1]]);
        Coords.setCurrent([l[2],l[3]]);
        Selection.update();
    };
    function tellSelect(){return unscale(Coords.getFixed());};
    function tellScaled(){return Coords.getFixed();};
    function setOptNew(opt){setOpt(opt);interfaceUpdate();};
    function disableCrop(){
        _opt.disabled=true;
        Selection.disableHandles();
        Selection.setCursor('default');
        Tracker.setCursor('default');
    };
    function enableCrop(){_opt.disabled=false;interfaceUpdate();};
    function cancelCrop(){Selection.done();Tracker.activateHandlers(null,null);};
    function destroy(){$div.remove();$boximg.show();};
    function interfaceUpdate(alt){//This method tweaks the interface based on _opt object.//Called when _opt are changed and at end of initialization.
        _opt.canResize?alt?Selection.enableOnly():Selection.enableHandles():Selection.disableHandles();
        Tracker.setCursor(_opt.canSelect?'crosshair':'default');
        Selection.setCursor(_opt.canMove?'move':'default');
        $div.css('backgroundColor','black');
        if('setSelect' in _opt){
            setSelect(opt.setSelect);
            Selection.done();
            delete(_opt.setSelect);
        }
        if('trueSize' in _opt){
            xscale=_opt.trueSize[0]/boundx;
            yscale=_opt.trueSize[1]/boundy;
        }
        xlimit=_opt.maxSize[0] || 0;
        ylimit=_opt.maxSize[1] || 0;
        xmin=_opt.minSize[0] || 0;
        ymin=_opt.minSize[1] || 0;
        if('outerImage' in _opt){
            $img.attr('src',_opt.outerImage);
            delete(_opt.outerImage);
        }
        Selection.refresh();
    };
    $hdl_holder.hide();
    interfaceUpdate(true);
    var api={animateTo:animateTo,setSelect:setSelect,setOpt:setOptNew,tellSelect:tellSelect,tellScaled:tellScaled,disable:disableCrop,enable:enableCrop,cancel:cancelCrop,focus:KeyManager.watchKeys,getBounds:function(){return [boundx*xscale,boundy*yscale]},getWidgetSize:function(){return [boundx,boundy]},release:Selection.release,destroy:destroy};
    $boximg.data('Jcrop',api);
    return api;
};
$.fn.Jcrop=function(_opt){
    function attachWhenDone(from){
        var loadsrc=_opt.useImg || from.src;
        var img=new Image();
        img.onload=function(){$.Jcrop(from,_opt)};
        img.src=loadsrc;
    };
    if(typeof(_opt)!=='object'){_opt={}}
    this.each(function(){            //Iterate over each object,attach Jcrop
        if($(this).data('Jcrop')){    //If we've already attached to this object
            if(_opt=='api'){        //The API can be requested this way(undocumented)
                return $(this).data('Jcrop')
            }else{                    //Otherwise,we just reset the _opt...
                $(this).data('Jcrop').setOpt(_opt);
            }
        }else{                        //If we haven't been attached,preload and attach
            attachWhenDone(this);
        }
    });
    return this;                    //Return "this" so we're chainable a la jQuery plugin-style!
};
})(jQuery)
//插件調用
$(function(){
    var api=$.Jcrop('#cropbox',{setSelect:[0,0,800,600],xlineImg:'@manage/img/loading.gif',onChange:getSize,onSelect:getSize});
    function getSize(c){$('#x').val(c.x);$('#y').val(c.y);$('#x2').val(c.x2);$('#y2').val(c.y2);$('#w').val(c.w);$('#h').val(c.h);};
    $('#setsel').click(function(e){api.setSelect([0,0,250,200])});//缩略图
});
</script>
</head>
<body>
<table width='100%' border='0' cellspacing='0' cellpadding='1' style='background:#333;'>
    <form action='#' method='post' id='f1'>
    <input type='text' id='x' name='x'><!--X1-->
    <input type='text' id='y' name='y'><!--Y1-->
    <input type='text' id='x2' name='x2'><!--X2-->
    <input type='text' id='y2' name='y2'><!--Y2-->
    <tr><td style='border-top:1px solid #666;' height='35'> <input type='button' class='bttn' id='setsel' value='縮略圖'></td></tr>

    <tr style='background:#000;'><td><img src='1.jpg' id='cropbox' width='800' height='600'></td></tr>
</form></table>

創作者介紹
創作者 逗號 的頭像
逗號

電腦軟體討論交流區

逗號 發表在 痞客邦 留言(0) 人氣()