最近天天都是加班，好不容易年前休息了，就抽点时间谢谢，自认为还是比较简单易懂的，没有用什么复杂牛叉的算法，因为我也会，呵呵。(没有对图片大小边界做判断，只对容器做了判断，请注意~
)
懒得详细说明了，先上前端代码：
<!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('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.onmouseup=function(){
if(!-[1,]){o.releaseCapture();}
document.onmousemove=null;
document.onmouseup=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.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+'px';
ul.style.left=newX+'px';
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={'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=w<minW?minW:w>divW-oldL?divW-oldL:w;
ul.style.width=w+'px';
}
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+'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();
})();
</script>
</body>
</html>
这里是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);
}
?>
附件可以直接下载，大家共勉~
分享到：
相关推荐
【标题】"JS简易图片裁剪-单点移动带缩略图"是一个关于使用JavaScript实现简单图片裁剪功能的教程，结合了单点移动和缩略图显示的特性。这个功能在网页应用中非常常见，比如用户需要上传头像或者进行图片编辑时。 ...
JavaScript应用实例-多点_取色_点线.js
AutoJs源码-教程_多点触控(6)。本资源购买前提醒：本源码都是实际autojs项目模板，安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己...
在前端开发中，图片上传和裁剪功能是一个常见的需求，特别是在网页和移动应用中，用户可能需要上传并个性化处理他们的照片。"前端上传图片可裁剪-photoClip.js-支持移动端.rar" 是一个专为此目的设计的插件，适用于...
在移动应用或Web应用中，用户可能需要上传或编辑图片，此时图片裁剪功能就显得尤为关键。 “nice-cropper”是针对uni-app的一个插件，它提供了一个简洁易用的图片裁剪解决方案。开发者在使用过程中可能会遇到图片太...
【标题】"上传图片可裁剪-photoClip.js-支持移动端"是一个前端开发资源，主要功能是为用户提供在网页和移动设备上对上传图片进行裁剪的功能。这个工具可以帮助开发者实现用户友好的图像处理界面，让用户根据需要调整...
可用于头像等的图片上传处理，打开图片文件后，支持图片的拖动、图片放大和缩小；可获取到base64资源，也可以上传到自己服务器获取普通图片地址。 本资源经过本人测试、改进，没有做进一部的封装。可直接使用，如有...
在`js`文件中，我们可以通过`wx.createSelectorQuery()`获取组件实例，然后调用组件提供的方法，如`init()`用于初始化裁剪区域，`crop()`用于执行裁剪操作，`getInfo()`用于获取裁剪后的图片信息等。 在实际应用中...
`cropper.js` 是一个强大的 JavaScript 图片裁剪库，它支持在移动端和PC端进行图片的裁剪、放大、缩小和移动操作，极大地提高了用户体验。本教程将详细介绍如何利用 `cropper.js` 来实现这些功能。 首先，我们要...
JavaScript应用实例-取色_多点.js
在本案例中，"javascript经典特效---图片的左右移动.rar" 提供了一个经典的JavaScript实现图片左右滑动的示例。这个特效使得用户可以通过点击或者自动播放的方式，使图片在网页上左右平滑移动，增加了用户体验的互动...
总结来说，jQuery在构建js图片墙时主要负责DOM操作、事件处理和动画效果，而图片墙的实现则涉及到布局算法、响应式设计、图片裁剪和交互功能等多个方面。理解并掌握这些知识点，将有助于你创建一个美观且高效的...
JavaScript应用实例-取色_多点v1209.js
在本文中，我们将深入探讨如何使用原生JavaScript和HTML5的canvas元素来实现图片裁剪功能。canvas作为HTML5的一项重要特性，为开发者提供了在网页上进行动态图形绘制的能力，而图片裁剪则是其常见的应用之一。 首先...
"web.config"和"web.sln"等文件可能是ASP.NET项目配置和解决方案文件，与前端的JavaScript实现图片裁剪功能关系不大，但它们可能用于构建服务器端的接口，用于接收裁剪后的图片数据。 7. 其他资源： "from.gif...
Jcrop是一款强大的JavaScript图像裁剪工具，它允许用户通过网页交互方式自由选择图片的裁剪区域。这个库基于jQuery，因此需要先引入jQuery才能使用。Jcrop的核心特性包括： 1. **实时预览**：用户可以在选择裁剪...
在开发Web应用时，用户头像的上传与裁剪功能是一项常见的需求，它允许用户个性化地选择并调整自己的展示图片。本项目名为“头像上传-裁剪-JAVA”，是基于JAVA实现的一个功能模块，主要涉及到的技术点包括文件上传、...
3. **绑定事件**：在`js`文件中绑定裁剪相关的事件，如`bindstart`（开始裁剪）、`bindend`（结束裁剪），并处理裁剪后的图片数据。 4. **样式调整**：在`wxss`文件中，根据需要调整组件的样式，以适应页面布局。 ...
**React-image-crop** 是一个专为React框架设计的高效、灵活且响应式的图片裁剪组件，它允许用户在Web应用中实现自定义的图片裁剪功能。这个库由Dominic Tobias开发，版本号为4c21e66，体现了开发者对前端交互体验的...
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个简单的图片裁剪程序，以及在实际项目中可能涉及的关键技术。首先，我们要明白JavaScript是一种广泛应用于网页开发的脚本语言，它允许我们动态地控制网页...