简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Backend Development  >  JS simple picture cropping-multi-point movement

JS simple picture cropping-multi-point movement

巴扎黑
巴扎黑Original
2016-11-24 10:20:561481browse

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

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

<!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;}
#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%;}
</style>
</head>
<body>
<div id="picDiv">
<ul>
    <li class="tl"></li>
    <li class="tc"></li>
    <li class="tr"></li>
    <li class="ml"></li>
    <li class="mr"></li>
    <li class="fl"></li>
    <li class="fc"></li>
    <li class="fr"></li>
    </ul>
    <img src="../images/2.jpg" style="position:absolute; top:0; left:0; opacity:0.3; filter:alpha(opacity=30); z-index:10;" />
    <img src="../images/2.jpg" style="position:absolute; top:0; left:0; clip:rect(0 0 0 0); z-index:100;" />
</div>
<form action="41.php" method="post">
    <input type="submit" value=" 提 交 " />
    <input type="hidden" id="imgInfor" name="imgInfor" />
</form>
<script type="text/javascript">
(function(){
var div=document.getElementById(&#39;picDiv&#39;),
ul=div.getElementsByTagName(&#39;ul&#39;)[0],
li=ul.getElementsByTagName(&#39;li&#39;);
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(&#39;img&#39;)[1].style.clip=&#39;rect(&#39;+t+&#39;px &#39;+r+&#39;px &#39;+f+&#39;px &#39;+l+&#39;px)&#39;;
document.getElementById(&#39;imgInfor&#39;).value="{&#39;x&#39;:&#39;"+l+"&#39;,&#39;y&#39;:&#39;"+t+"&#39;,&#39;w&#39;:&#39;"+ul.offsetWidth+"&#39;,&#39;h&#39;:&#39;"+ul.offsetHeight+"&#39;,&#39;url&#39;:&#39;"+div.getElementsByTagName(&#39;img&#39;)[1].src+"&#39;}";
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
},
clear=function(o){
if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
document.onmouseup=function(){
if(!-[1,]){o.releaseCapture();}
document.onmousemove=null;
document.onmouseup=null;
};
return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
};
if(!-[1,]){
var cDiv=document.createElement(&#39;div&#39;);
cDiv.style.cssText=&#39;width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;&#39;;
ul.appendChild(cDiv);
}
ul.onmousedown=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.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;
ul.style.top=newY+&#39;px&#39;;
ul.style.left=newX+&#39;px&#39;;
see();
};
clear(this);
};
for(var i in li){
li[i].onmousedown=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.onmousemove=function(e){
e=e||window.event;
var lis={&#39;w&#39;:&#39;tr,mr,fr&#39;,&#39;h&#39;:&#39;fl,fc,fr&#39;,&#39;l&#39;:&#39;tl,ml,fl&#39;,&#39;t&#39;:&#39;tl,tc,tr&#39;};
if(lis.w.indexOf(_method.className)>-1){
var w=e.clientX-oldX+oldW;
w=w<minW?minW:w>divW-oldL?divW-oldL:w;
ul.style.width=w+&#39;px&#39;;
}
if(lis.h.indexOf(_method.className)>-1){
var h=e.clientY-oldY+oldH;
h=h<minH?minH:h>divH-oldT?divH-oldT:h;
ul.style.height=h+&#39;px&#39;;
if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+&#39;px&#39;;}//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+&#39;px&#39;;
ul.style.width=oldW+oldL-l+&#39;px&#39;;
}
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+&#39;px&#39;;
ul.style.height=oldH+oldT-t+&#39;px&#39;;
if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=oldH+oldT-t+&#39;px&#39;;}//ie6下高度不变bug
}
see();
};
clear(this);
};
}
see();
})();
</script>
</body>
</html>

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

<?php
$img=json_decode(str_replace("\\&#39;",&#39;"&#39;,$_POST[&#39;imgInfor&#39;]),true);
$old = imagecreatefromstring(file_get_contents($img[&#39;url&#39;]));
if(function_exists("imagecreatetruecolor")){
  $new=imagecreatetruecolor($img[&#39;w&#39;],$img[&#39;h&#39;]); // 创建目标图gd2
}else{
  $new=imagecreate($img[&#39;w&#39;],$img[&#39;h&#39;]); // 创建目标图gd1
}
imagecopyresampled ($new,$old,0,0,$img[&#39;x&#39;],$img[&#39;y&#39;],$img[&#39;w&#39;],$img[&#39;h&#39;],$img[&#39;w&#39;],$img[&#39;h&#39;]);
imagejpeg($new,&#39;img\\&#39;.getip().&#39;_&#39;.time().&#39;.jpg&#39;);
@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[&#39;REMOTE_ADDR&#39;]) && $_SERVER[&#39;REMOTE_ADDR&#39;] && strcasecmp($_SERVER[&#39;REMOTE_ADDR&#39;], "unknown")){
$ip = $_SERVER[&#39;REMOTE_ADDR&#39;];
}else{
$ip = "unknown";
}
return ($ip);
}
?>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Predefined variables PHPNext article：Predefined variables PHP

Related articles

See more