学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的
php版
复制代码 代码如下:
resize
\
\
\
\
\
\
\
\
')
.bind(mousedown.r,function(e){self.start(e)})
.appendto(this.container[0]);
this.setimg();
},
setimg : function(){
var block = this.block;
this.imgc.css({
height: block.height(),
width : block.width(),
background-position : -+block.css(left)+ -+block.css(top)
});
},
start : function(e){
var $elem = $(e.target),
block = this.block,
self = this,
move = false,
container = this.container,
action = $elem.attr(action);
//这个 每次都要计算 基本dom结构的改变 浏览器的缩放 都会让里面的值发生改变
this.offset = $.extend({height:container.height(),width:container.width()},container.offset());
this.blockoriginal = {height:block.height(),width:block.width(),left:parseint(block.css(left)),top:parseint(block.css(top))};
if(action){
this.fun = this[action];
}else{
this.x = e.clientx - this.offset.left - this.blockoriginal.left ;
this.y = e.clienty - this.offset.top - this.blockoriginal.top;
move = true;
}
$(document)
.bind(mousemove.r,function(e){self.move(e,move)})
.bind(mouseup.r,function(){self.end()});
},
end : function(){
$(document)
.unbind(mousemove.r)
.unbind(mouseup.r);
},
move : function(e,ismove){
window.getselection
? window.getselection().removeallranges()
: document.selection.empty();
var block = this.block;
if(ismove){
var left = math.max(0,e.clientx - this.offset.left - this.x);
left = math.min(left,this.offset.width - this.blockoriginal.width);
var top = math.max(0,e.clienty - this.offset.top - this.y);
top = math.min(top,this.offset.height - this.blockoriginal.height);
block.css({left:left,top:top});
}else{
var offset = this.fun(e);
block.css(offset);
}
this.setimg();
this.movecallback();
},
down : function(e){
var blockoriginal = this.blockoriginal,
stop = math.max(dbody.scrolltop,ddoc.scrolltop), //出现垂直方向滚动条时候 要计算这个
offset = this.offset;
if(e.clienty-offset.top>=blockoriginal.top-stop){
var height = math.min(offset.height - blockoriginal.top,e.clienty-offset.top-blockoriginal.top+stop),
top = blockoriginal.top;
}else{
var height = math.min(offset.top+blockoriginal.top-e.clienty-stop,blockoriginal.top),
top = math.max(e.clienty - offset.top+stop,0);
}
return {height:height, top:top};
},
up : function(e){
var blockoriginal = this.blockoriginal,
stop = math.max(dbody.scrolltop,ddoc.scrolltop),
offset = this.offset;
if(e.clienty-offset.top-blockoriginal.heightvar top = math.max(e.clienty-offset.top+stop,0),
maxheight = blockoriginal.top + blockoriginal.height,
height = math.min(maxheight,blockoriginal.top + blockoriginal.height -(e.clienty-offset.top)-stop);
}else{
var height = math.min(e.clienty-offset.top-blockoriginal.top-blockoriginal.height+stop,offset.height-blockoriginal.top-blockoriginal.height),
top = blockoriginal.top+blockoriginal.height;
}
return {height:height, top:top};
},
left : function(e){
var blockoriginal = this.blockoriginal,
offset = this.offset;
if(e.clientx - offset.left - blockoriginal.width - blockoriginal.leftvar left = math.max(e.clientx - offset.left,0),
width = math.min(blockoriginal.left + blockoriginal.width,blockoriginal.left + blockoriginal.width -(e.clientx-offset.left));
}else{
var width = math.min(e.clientx-offset.left-blockoriginal.left-blockoriginal.width,offset.width-blockoriginal.left-blockoriginal.width),
left = blockoriginal.left + blockoriginal.width;
}
return {left : left, width : width};
},
right : function(e){
var blockoriginal = this.blockoriginal,
offset = this.offset;
if(e.clientx-offset.left>=blockoriginal.left){
var width = math.min(offset.width - blockoriginal.left,e.clientx - offset.left - blockoriginal.left),
left = blockoriginal.left;
}else{
var width = math.min(offset.left + blockoriginal.left - e.clientx,blockoriginal.left),
left = math.max(e.clientx - offset.left,0);
}
return {left : left, width : width};
},
rightdown : function(e){
return $.extend(this.right(e),this.down(e));
},
leftdown : function(e){
return $.extend(this.left(e),this.down(e));
},
rightup : function(e){
return $.extend(this.right(e),this.up(e));
},
leftup : function(e){
return $.extend(this.left(e),this.up(e));
},
getvalue : function(){
var block = this.block;
return {
left : parseint(block.css(left)),
top : parseint(block.css(top)),
width : block.width(),
height : block.height()
}
}
}
$.fn.clip = function(options){
options.container = this;
return new clip(options);
}
})();
$(#container).clip({
imgc : $(#imgc)
})