php js 图片 裁剪,JS简易图片裁剪-多点移动

最近天天都是加班，好不容易年前休息了，就抽点时间谢谢，自认为还是比较简单易懂的，没有用什么复杂牛叉的算法，因为我也会，呵呵。(没有对图片大小边界做判断，只对容器做了判断，请注意~ )

懒得详细说明了，先上前端代码：

无标题文档

*{margin:0; padding:0;}

#picDiv{width:703px; height:338px; background:#fff; border:1px solid #999; margin:100px auto; position:relative; overflow:hidden;}

#picDiv ul{width:200px; height:200px; border:1px dashed #fff; cursor:move; list-style:none; position:relative; z-index:200;}

#picDiv li{width:6px; height:6px; background:#fff; border:1px solid #333; margin:-4px 0 0 -4px; overflow:hidden; position:absolute; opacity:0.5; filter:alpha(opacity=50);}

#picDiv li.tl{cursor:nw-resize; top:0%; left:0%;}

#picDiv li.tc{cursor:n-resize; top:0%; left:50%;}

#picDiv li.tr{cursor:ne-resize; top:0%; left:100%;}

#picDiv li.ml{cursor:w-resize; top:50%; left:0%;}

#picDiv li.mr{cursor:e-resize; top:50%; left:100%;}

#picDiv li.fl{cursor:sw-resize; top:100%; left:0%;}

#picDiv li.fc{cursor:s-resize; top:100%; left:50%;}

#picDiv li.fr{cursor:se-resize; top:100%; left:100%;}

(function(){

var div=document.getElementById('picDiv'),

ul=div.getElementsByTagName('ul')[0],

li=ul.getElementsByTagName('li');

divW=div.offsetWidth-2,

divH=div.offsetHeight-2,

see=function(){

var t=ul.offsetTop,

l=ul.offsetLeft,

r=l+ul.offsetWidth,

f=t+ul.offsetHeight;

div.getElementsByTagName('img')[1].style.clip='rect('+t+'px '+r+'px '+f+'px '+l+'px)';

document.getElementById('imgInfor').value="{'x':'"+l+"','y':'"+t+"','w':'"+ul.offsetWidth+"','h':'"+ul.offsetHeight+"','url':'"+div.getElementsByTagName('img')[1].src+"'}";

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

},

clear=function(o){

if(!-[1,]){o.setCapture();}//学增加丢失焦点事件

document.οnmοuseup=function(){

if(!-[1,]){o.releaseCapture();}

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标

};

if(!-[1,]){

var cDiv=document.createElement('div');

cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';

ul.appendChild(cDiv);

}

ul.οnmοusedοwn=function(e){

e=e||window.event;

var oldX=e.clientX-ul.offsetLeft,

oldY=e.clientY-ul.offsetTop,

maxW=divW-ul.offsetWidth,

maxH=divH-ul.offsetHeight;

document.οnmοusemοve=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;

ul.style.top=newY+'px';

ul.style.left=newX+'px';

see();

};

clear(this);

};

for(var i in li){

li[i].οnmοusedοwn=function(e){

e=e||window.event;

var oldX=e.clientX,

oldY=e.clientY,

oldT=ul.offsetTop+2,

oldL=ul.offsetLeft+2,

oldW=ul.offsetWidth,

oldH=ul.offsetHeight,

minW=50,minH=50,

_method=this;

if(e.stopPropagation){

e.stopPropagation();

}else{

e.cancelBubble=true;

}

document.οnmοusemοve=function(e){

e=e||window.event;

var lis={'w':'tr,mr,fr','h':'fl,fc,fr','l':'tl,ml,fl','t':'tl,tc,tr'};

if(lis.w.indexOf(_method.className)>-1){

var w=e.clientX-oldX+oldW;

w=wdivW-oldL?divW-oldL:w;

ul.style.width=w+'px';

}

if(lis.h.indexOf(_method.className)>-1){

var h=e.clientY-oldY+oldH;

h=hdivH-oldT?divH-oldT:h;

ul.style.height=h+'px';

if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug

}

if(lis.l.indexOf(_method.className)>-1){

var l=e.clientX-oldX+oldL;

l=l<0?0:l>oldW+oldL-minW?oldW+oldL-minW:l;

ul.style.left=l+'px';

ul.style.width=oldW+oldL-l+'px';

}

if(lis.t.indexOf(_method.className)>-1){

var t=e.clientY-oldY+oldT;

t=t<0?0:t>oldH+oldT-minH?oldH+oldT-minH:t;

ul.style.top=t+'px';

ul.style.height=oldH+oldT-t+'px';

if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=oldH+oldT-t+'px';}//ie6下高度不变bug

}

see();

};

clear(this);

};

}

see();

})();

这里是php处理的代码，具体图片自己弄吧~哈哈~后期会出功能多一点的<?php

$img=json_decode(str_replace("\\'",'"',$_POST['imgInfor']),true);

$old = imagecreatefromstring(file_get_contents($img['url']));

if(function_exists("imagecreatetruecolor")){

$new=imagecreatetruecolor($img['w'],$img['h']); // 创建目标图gd2

}else{

$new=imagecreate($img['w'],$img['h']); // 创建目标图gd1

}

imagecopyresampled ($new,$old,0,0,$img['x'],$img['y'],$img['w'],$img['h'],$img['w'],$img['h']);

imagejpeg($new,'img\\'.getip().'_'.time().'.jpg');

@header("Content-type: image/jpeg");

imagejpeg($new);

imagedestroy($new);

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);

}

?>

本文原创发布php中文网，转载请注明出处，感谢您的尊重！