자바스크립트 이미지 크롭 기법 해석_자바스크립트 기법

php gd 라이브러리를 배우다가 똑같은 모양으로 잘라낼 수 있는 그림이 있다는 걸 봤습니다. >
코드는 다음과 같습니다.

• 
  
  
  


• 
  
  
  

\

\

\

\

\

\

\

\
')
.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(),
"배경 위치" : "-" block.css("left") " -" block.css("top")
})
},
start : function(e){
var $elem = $(e.target),
block = this.block,
self = this,
move = false,
컨테이너 = this.container,
action = $elem.attr("action");
//기본 DOM 구조가 변경될 때마다 브라우저의 확대/축소에 따라 내부 값이 변경됩니다.
이. 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. 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
? getSelection().removeAllRanges()
: document.selection.empty();

var block = this.block;
if(isMove){
var left = Math. 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)
}
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 (예: 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.left var 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 {왼쪽: 왼쪽, 너비: 너비},
right: function(e){
var blockOriginal,
offset = this.offset;
if(e.clientX-offset.left>=blockOriginal.left){
var width = Math.min(offset.width - blockOriginal.left,e.clientX - 오프셋 .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 : 함수 (){
var block = this.block;
return {
left:parseInt(block.css("left")),
top:parseInt(block.css("top") ),
너비 : block.width(),
높이 : block.height()
}
}
}
$.fn.clip = function(options ){
options.container = this;
새 클립(옵션) 반환
}
})();
$("#container").clip({
imgC : $("#imgC")
})