php+ajax剪切图片(1.26更新)

复制内容到剪贴板

代码:

<style>
#image{background-image:url(test1.jpg);width:1000px;height:200px;border:1px solid #000}
/*绝对定位很重要*/
#helper{position:absolute;width:100px;height:100px;border:1px solid #a9b53f;cursor:pointer;display:none;background-color:#999;top:30px;left:30px}
</style>
<script>
//目标源
var target;
//拖拽辅助容器
var helper;
//鼠标默认状态（false=没有按下）
var iMouseDown=false;
//当前的目标源
var ctar;
//鼠标偏移量
var mouseOff;
//ajax相关
var ajax;
//继承number类的NANA0，用途为：如果一个数为100px会返回100。
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
//初始化AJAX
function createRequest(){
var ajax;
if(window.ActiveXObject){
  try{
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(e){
   ajax = false;
  }
}else{
  try{
   ajax = new XMLHttpRequest();
  }catch(e){
   ajax = false;
  }
}
if(!ajax){
  alert("Error creating the XMLHttpRequest object.");
}else{
  return ajax;
}
}
//反送AJAX请求
function cutp(cutC){
ajax=createRequest();
ajax.onreadystatechange = action;
//发送请求的URL
url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt
(cutC.offsetHeight);
window.status = url;
ajax.open("GET", "image.php?"+url, true);
ajax.send(null);
}
function action(){
var show = document.getElementById("show");
//如果SHOW这个容器原先有子节点，就清楚子节点
if(show.hasChildNodes()){
  show.removeChild(show.childNodes[0]);
}
//状态为4&200的时候返回信息
if(ajax.readyState==4&&ajax.status==200){
  show.innerHTML = ajax.responseText;
}
}
//创建可拖拽容器
function createContainer(arg){
helper = document.getElementById('helper');
//设置属性
helper.setAttribute("cut",1);
arg.onmouseover = function(){
  helper.style.display="block";
}
arg.onmouseout = function(){
  helper.style.display="none";
}
helper.ondblclick = function(){
  cutp(helper);
}
}
//获取鼠标位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
}
return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
};
}

//获取鼠标在当前容器的偏移量
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
//获取鼠标相对父节点的偏移量
function getPosition(e){
var left = 0;
var top  = 0;
while (e.offsetParent){
  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
  e     = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
//鼠标移动处罚的函数
function mouseMove(ev){
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
var mousePos = mouseCoords(ev);
var rootar = tar.parentNode;
var mouseOf = getPosition(rootar);
//判断状态
if(iMouseDown&&mouseOff){
  var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;
  var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;
  var conLeft = mousePos.x-mouseOff.x;
  var conTop = mousePos.y-mouseOff.y;
  if(conLeft>=mouseOf.x&&conLeft<=limLefX){
   helper.style.left = mousePos.x-mouseOff.x;
  }
  if(conTop>=mouseOf.y&&conTop<=limBottomY){
   helper.style.top = mousePos.y-mouseOff.y;
  }
}
}

//鼠标按键起来的函数
function mouseUp(){
iMouseDown = false;
}

//按下鼠标按键的函数
function mouseDown(ev){
iMouseDown = true;
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
if(tar.getAttribute("cut")){
  var hmouseOff = getPosition(tar);
  helper.style.left = hmouseOff.x;
  helper.style.top = hmouseOff.y;
  mouseOff = getMouseOffset(tar,ev);
}
}
//监听事件
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
window.onload=function(){
target = document.getElementById("image");
createContainer(target);
}
</script>
<div id="image" class="im"><div id="helper" class="drag">#dragHelper</div></div>
<div id="show"></div>

复制PHP内容到剪贴板

PHP代码:

<?php
$path = $_GET['path'];
$x = $_GET['x'];
$y = $_GET['y'];
$img_name = rand(5, 15).".jpg"; 
$width = intval($_GET['width']);
$height = intval($_GET['height']);
list($owidth,$oheight) = getimagesize($path);
$n_image = imagecreatetruecolor($width,$height);
$image = imagecreatefromjpeg($path);
imagecopyresampled($n_image,$image,0,0,$x,$y,$owidth,$oheight,$owidth,$oheight);
imagejpeg($n_image,$img_name,100);
?>
<img src="<? echo $img_name ?>">

1.png (179.74 KB)

2.png (180.05 KB)

3.png (175.15 KB)

4.png (188.54 KB)

引用:

原帖由 insominia 于 2006-12-25 18:55 发表
include('image_class.php');
image_class.php文件在哪里啊？源代码里没有提供

复制PHP内容到剪贴板

PHP代码:

echo '没有进水，很不错哦';

复制PHP内容到剪贴板

PHP代码:

echo '十分感谢大家的支持';

复制PHP内容到剪贴板

PHP代码:

<style>
#image{background-image:url(test1.jpg);width:1000px;height:200px;border:1px solid #000}
/*绝对定位很重要*/
#helper{position:absolute;width:100px;height:100px;border:1px solid #a9b53f;cursor:pointer;display:none;background-color:#999;top:30px;left:30px}
</style>
<script>
//目标源
var target;
//拖拽辅助容器
var helper;
//鼠标默认状态（false=没有按下）
var iMouseDown=false;
//当前的目标源
var ctar;
//鼠标偏移量
var mouseOff;
//ajax相关
var ajax;
//继承number类的NANA0，用途为：如果一个数为100px会返回100。
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
//初始化AJAX
function createRequest(){
var ajax;
if(window.ActiveXObject){
  try{
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(e){
   ajax = false;
  }
}else{
  try{
   ajax = new XMLHttpRequest();
  }catch(e){
   ajax = false;
  }
}
if(!ajax){
  alert("Error creating the XMLHttpRequest object.");
}else{
  return ajax;
}
}
//反送AJAX请求
function cutp(cutC){
ajax=createRequest();
ajax.onreadystatechange = action;
//发送请求的URL
url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt
(cutC.offsetHeight);
window.status = url;
ajax.open("GET", "image.php?"+url, true);
ajax.send(null);
}
function action(){
var show = document.getElementById("show");
//如果SHOW这个容器原先有子节点，就清楚子节点
if(show.hasChildNodes()){
  show.removeChild(show.childNodes[0]);
}
//状态为4&200的时候返回信息
if(ajax.readyState==4&&ajax.status==200){
  show.innerHTML = ajax.responseText;
}
}
//创建可拖拽容器
function createContainer(arg){
helper = document.getElementById('helper');
//设置属性
helper.setAttribute("cut",1);
arg.onmouseover = function(){
  helper.style.display="block";
}
arg.onmouseout = function(){
  helper.style.display="none";
}
helper.ondblclick = function(){
  cutp(helper);
}
}
//获取鼠标位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
}
return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
};
}

//获取鼠标在当前容器的偏移量
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
//获取鼠标相对父节点的偏移量
function getPosition(e){
var left = 0;
var top  = 0;
while (e.offsetParent){
  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
  e     = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
//鼠标移动处罚的函数
function mouseMove(ev){
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
var mousePos = mouseCoords(ev);
var rootar = tar.parentNode;
var mouseOf = getPosition(rootar);
//判断状态
if(iMouseDown&&mouseOff){
  var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;
  var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;
  var conLeft = mousePos.x-mouseOff.x;
  var conTop = mousePos.y-mouseOff.y;
  if(conLeft>=mouseOf.x&&conLeft<=limLefX){
   helper.style.left = mousePos.x-mouseOff.x;
  }
  if(conTop>=mouseOf.y&&conTop<=limBottomY){
   helper.style.top = mousePos.y-mouseOff.y;
  }
}
}

//鼠标按键起来的函数
function mouseUp(){
iMouseDown = false;
}

//按下鼠标按键的函数
function mouseDown(ev){
iMouseDown = true;
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
if(tar.getAttribute("cut")){
  var hmouseOff = getPosition(tar);
  helper.style.left = hmouseOff.x;
  helper.style.top = hmouseOff.y;
  mouseOff = getMouseOffset(tar,ev);
}
}
//监听事件
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
window.onload=function(){
target = document.getElementById("image");
createContainer(target);
}
</script>
<div id="image" class="im"><div id="helper" class="drag">#dragHelper</div></div>
<div id="show"></div>