JS简易图片裁剪-单点移动带缩略图
比较上一个版本多了缩略效果，但是切割图的地方还没有做大小缩放功能，等有时间做出来了继续更新，谢谢大家捧场哈
老规矩，先上html代码(没有对图片大小边界做判断，只对容器做了判断，请注意~ )
<!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>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
.imageCut{width:524px; background:#f1f7fb; padding:20px;}
#picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}
#picDiv img{position:absolute; top:0px; left:0px;}
#picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}
#picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}
#picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}
#picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}
form{clear:both; text-align:right;}
</style>
</head>
<body>
<div class="imageCut">
<div id="picDiv">
<img src="../../images/2.jpg" />
</div>
<div id="picSeeSmall"></div>
<div id="picSeeBig"></div>
<form action="cutPic.php" method="post">
<input type="submit" value=" 提 交 " />
<input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
<input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />
</form>
</div>
<script type="text/javascript">
(function(){
window.onload=cutImage;
function cutImage(){
var pDiv=document.getElementById('picDiv');
pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;
var pDivImg=pDiv.getElementsByTagName('img')[0],
clip=pDiv.getElementsByTagName('img')[1],
pCut=document.getElementById('picCut'),
pChange=document.getElementById('picCutChange');
pSeeS=document.getElementById('picSeeSmall'),
pSee=document.getElementById('picSeeBig'),
pDivW=pDiv.offsetWidth-2,
pDivH=pDiv.offsetHeight-2,
opacity=function(obj,v){
if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};
obj.style.MozOpacity=v/100;
obj.style.opacity=v/100;
},
see=function(){
var getPos={
't':pCut.offsetTop,
"l":pCut.offsetLeft,
'w':pCut.offsetWidth,
'h':pCut.offsetHeight,
'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),
'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)
};
init(getPos);
seePic(pSee,getPos);
seePic(pSeeS,getPos);
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
},
init=function(getPos){
var t=getPos.t*getPos.kh,
l=getPos.l*getPos.kw;
if(!clip){
clip=document.createElement('img');
clip.src=pDivImg.src;
pDiv.appendChild(clip);
}
pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';
clip.style.cssText='top:-'+t+'px; left:-'+l+'px';
clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)';
opacity(pDivImg,50);
},
seePic=function(obj,getPos){
var img=obj.getElementsByTagName('img')[0],
k=obj.offsetWidth/getPos.w;
t=getPos.t*getPos.kh+getPos.t,
l=getPos.l*getPos.kw+getPos.l;
if(!img){
img=document.createElement('img');
img.src=pDivImg.src;
obj.appendChild(img);
}
img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;';
document.getElementById(obj.id+'Infor').value="{'x':'"+l+"','y':'"+t+"','w':'"+getPos.w+"','h':'"+getPos.h+"','k':'"+k+"','nw':'"+(obj.offsetWidth-2)+"','nh':'"+(obj.offsetHeight-2)+"','url':'"+pDivImg.src+"'}";
},
clear=function(o){
if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
document.onmouseup=function(){
if(!-[1,]){o.releaseCapture();}
document.onmousemove=null;
document.onmouseup=null;
};
return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
};
if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了
var cDiv=document.createElement('div');
cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
pCut.appendChild(cDiv);
}
pCut.onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX-pCut.offsetLeft,
oldY=e.clientY-pCut.offsetTop,
maxW=pDivW-pCut.offsetWidth,
maxH=pDivH-pCut.offsetHeight;
document.onmousemove=function(e){
e=e||window.event;
var newX=e.clientX-oldX,newY=e.clientY-oldY;
newX=newX<0?0:newX>maxW?maxW:newX;
newY=newY<0?0:newY>maxH?maxH:newY;
pCut.style.top=newY+'px';
pCut.style.left=newX+'px';
see();
};
clear(this);
};
pChange.onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX,
oldY=e.clientY,
oldT=pCut.offsetTop+2,
oldL=pCut.offsetLeft+2,
oldW=pCut.offsetWidth,
oldH=pCut.offsetHeight,
minW=50,minH=50;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
document.onmousemove=function(e){
e=e||window.event;
var w=e.clientX-oldX+oldW;
w=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;
h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;
w=w!=h?h:w;
pCut.style.width=w+'px';
pCut.style.height=h+'px';
if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
see();
};
clear(this);
};
see();
}
})();
</script>
</body>
</html>
继续php代码
<?php
$time=time();
cutPic('Small',$time);
cutPic('Big',$time);
function cutPic($nam,$time){
$img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true);
$old_img=imagecreatefromstring(file_get_contents($img['url']));
$new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg';
if(function_exists("imagecreatetruecolor")){
$new_img=imagecreatetruecolor($img['nw'],$img['nh']);
}else{
$new_img=imagecreate($img['nw'],$img['nh']);
}
imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']);
imagejpeg($new_img,$new_url);
imagedestroy($new_img);
echo '<img src="'.$new_url.'" /><br /><br /><br />';
}
function getip(){
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
$ip = getenv("HTTP_CLIENT_IP");
}else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
$ip = getenv("HTTP_X_FORWARDED_FOR");
}else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
$ip = getenv("REMOTE_ADDR");
}else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
$ip = $_SERVER['REMOTE_ADDR'];
}else{
$ip = "unknown";
}
return ($ip);
}
?>
继续附件上传，共勉共勉。。。