JS simple picture cropping-multi-point movement-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

JS simple picture cropping-multi-point movement

巴扎黑

Nov 24, 2016 am 10:20 AM

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

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

<!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="/static/imghwm/default1.png"  data-src="../images/2.jpg"  class="lazy"     style="max-width:90%" / alt="JS simple picture cropping-multi-point movement" >
    <img  src="/static/imghwm/default1.png"  data-src="../images/2.jpg"  class="lazy"     style="max-width:90%" / alt="JS simple picture cropping-multi-point movement" >
</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

What is the best way to send an email using PHP?May 08, 2025 am 12:21 AM

ThebestapproachforsendingemailsinPHPisusingthePHPMailerlibraryduetoitsreliability,featurerichness,andeaseofuse.PHPMailersupportsSMTP,providesdetailederrorhandling,allowssendingHTMLandplaintextemails,supportsattachments,andenhancessecurity.Foroptimalu

Best Practices for Dependency Injection in PHPMay 08, 2025 am 12:21 AM

The reason for using Dependency Injection (DI) is that it promotes loose coupling, testability, and maintainability of the code. 1) Use constructor to inject dependencies, 2) Avoid using service locators, 3) Use dependency injection containers to manage dependencies, 4) Improve testability through injecting dependencies, 5) Avoid over-injection dependencies, 6) Consider the impact of DI on performance.

PHP performance tuning tips and tricksMay 08, 2025 am 12:20 AM

PHPperformancetuningiscrucialbecauseitenhancesspeedandefficiency,whicharevitalforwebapplications.1)CachingwithAPCureducesdatabaseloadandimprovesresponsetimes.2)Optimizingdatabasequeriesbyselectingnecessarycolumnsandusingindexingspeedsupdataretrieval.

PHP Email Security: Best Practices for Sending EmailsMay 08, 2025 am 12:16 AM

ThebestpracticesforsendingemailssecurelyinPHPinclude:1)UsingsecureconfigurationswithSMTPandSTARTTLSencryption,2)Validatingandsanitizinginputstopreventinjectionattacks,3)EncryptingsensitivedatawithinemailsusingOpenSSL,4)Properlyhandlingemailheaderstoa

How do you optimize PHP applications for performance?May 08, 2025 am 12:08 AM

TooptimizePHPapplicationsforperformance,usecaching,databaseoptimization,opcodecaching,andserverconfiguration.1)ImplementcachingwithAPCutoreducedatafetchtimes.2)Optimizedatabasesbyindexing,balancingreadandwriteoperations.3)EnableOPcachetoavoidrecompil

What is dependency injection in PHP?May 07, 2025 pm 03:09 PM

DependencyinjectioninPHPisadesignpatternthatenhancesflexibility,testability,andmaintainabilitybyprovidingexternaldependenciestoclasses.Itallowsforloosecoupling,easiertestingthroughmocking,andmodulardesign,butrequirescarefulstructuringtoavoidover-inje

Best PHP Performance Optimization TechniquesMay 07, 2025 pm 03:05 PM

PHP performance optimization can be achieved through the following steps: 1) use require_once or include_once on the top of the script to reduce the number of file loads; 2) use preprocessing statements and batch processing to reduce the number of database queries; 3) configure OPcache for opcode cache; 4) enable and configure PHP-FPM optimization process management; 5) use CDN to distribute static resources; 6) use Xdebug or Blackfire for code performance analysis; 7) select efficient data structures such as arrays; 8) write modular code for optimization execution.

PHP Performance Optimization: Using Opcode CachingMay 07, 2025 pm 02:49 PM

OpcodecachingsignificantlyimprovesPHPperformancebycachingcompiledcode,reducingserverloadandresponsetimes.1)ItstorescompiledPHPcodeinmemory,bypassingparsingandcompiling.2)UseOPcachebysettingparametersinphp.ini,likememoryconsumptionandscriptlimits.3)Ad

See all articles