php+ajax剪切圖片

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