javascript 图片裁剪技巧解读

259 阅读 0 评论 171 点赞

我是靠谱客的博主稳重金鱼，最近开发中收集的这篇文章主要介绍javascript 图片裁剪技巧解读，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

学php gd库看到有图片裁剪正好整一个嗯其实挺简单的
php版

复制代码代码如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Resize</title> 
<style type="text/css"> 
*{ padding:0; margin:0;} 
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; } 
li{ float:left; width:500px;} 
#container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);} 
#container .block{height:100px; width:100px; border:1px solid #000000; position:absolute; left:50px; top:50px; background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;} 
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{ 
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;} 
.rLeftDown,.rRightUp{cursor:ne-resize;} 
.rRightDown,.rLeftUp{cursor:nw-resize;} 
.rRight,.rLeft{cursor:e-resize;} 
.rUp,.rDown{cursor:n-resize;} 
.rRightDown{ bottom:-3px; right:-3px;} 
.rLeftDown{ bottom:-3px; left:-3px;} 
.rRightUp{ top:-3px; right:-3px;} 
.rLeftUp{ top:-3px; left:-3px;} 
.rRight{ right:-3px; top:50%} 
.rLeft{ left:-3px; top:50%} 
.rUp{ top:-3px; left:50%} 
.rDown{ bottom:-3px; left:50%} 
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<div id="container"></div> 
</li> 
<li> 
<div id="imgC"></div> 
</li> 
</ul> 
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> 
<script type="text/javascript"> 
(function(){ 
var dBody = document.body, 
dDoc = document.documentElement; 
var clip = function(options){ 
this.init.call(this,options); 
} 
clip.prototype = { 
options :{ 
moveCallBack : function(){}, 
className : "block" 
}, 
init : function(options){ 
$.extend(this,this.options,options||{}); 
if(!this.container || !this.imgC){ 
return; 
} 
this.container = $(this.container); 
var self = this; 
this.block = $('<div class="'+this.className+'"> 
<div action="rightDown" class="rRightDown"></div> 
<div action="leftDown" class="rLeftDown"></div> 
<div action="rightUp" class="rRightUp"></div> 
<div action="leftUp" class="rLeftUp"></div> 
<div action="right" class="rRight"></div> 
<div action="left" class="rLeft"></div> 
<div action="up" class="rUp"></div> 
<div action="down" class="rDown" ></div> 
</div>') 
.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.height<=blockOriginal.top-sTop){ 
var 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.left<=0){ 
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 {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") 
}) 
</script> 
</body> 
</html> 