Home > Article > Backend Development > php+ajax cut picture_PHP tutorial
php+ajax cut picture_PHP tutorial
- WBOYOriginal
- 2016-07-20 11:05:401158browse
<script><br>//Target source<br>var target;<br>//Drag auxiliary container<br>var helper;<br>//Mouse Default state (false=not pressed) <br>var iMouseDown=false;<br>//Current target source<br>var ctar;<br>//Mouse offset<br>var mouseOff;<br> //ajax related <br>var ajax;<br>//Inherits NANA0 of the number class, the purpose is: if a number is 100px, 100 will be returned. <br>Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br>//Initialize AJAX<br>function createRequest(){<br>var ajax;<br>if( window.ActiveXObject){<br> try{<br> ajax = new ActiveXObject("Microsoft.XMLHTTP");<br> }catch(e){<br> ajax = false;<br> }<br>}else {<br> try{<br> ajax = new XMLHttpRequest();<br> }catch(e){<br> ajax = false;<br> }<br>}<br>if(!ajax){<br> alert("Error creating the XMLHttpRequest object.");<br>}else{<br> return ajax;<br>}<br>}<br>//Return AJAX request<br>function cutp(cutC ){<br>ajax=createRequest();<br>ajax.onreadystatechange = action;<br>//Send the requested URL<br>url = "path=./test1.jpg&x="+parseInt(cutC.style .left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt<br>(cutC.offsetHeight);<br>window. status = url;<br>ajax.open("GET", "image.php?"+url, true);<br>ajax.send(null);<br>}<br>function action(){<br>var show = document.getElementById("show");<br>//If the SHOW container originally had child nodes, clear the child nodes<br>if(show.hasChildNodes()){<br> show.removeChild (show.childNodes[0]);<br>}<br>//Return information when the status is 4&200<br>if(ajax.readyState==4&&ajax.status==200){<br> show.innerHTML = ajax.responseText;<br>}<br>}<br>//Create a draggable container<br>function createContainer(arg){<br>helper = document.getElementById('helper');<br>// Set attributes<br>helper.setAttribute("cut",1);<br>arg.onmouseover = function(){<br> helper.style.display="block";<br>}<br>arg.onmouseout = function(){<br> helper.style.display="none";<br>}<br>helper.ondblclick = function(){<br> cutp(helper);<br>}<br>}<br>//Get the mouse position<br>function mouseCoords(ev){<br>if(ev.pageX || ev.pageY){<br> return {x:ev.pageX, y:ev.pageY};<br>}<br>return {<br> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br>};<br>}<br><br>//Get the mouse offset in the current container<br>function getMouseOffset(target, ev){<br>ev = ev || window.event;<br>var docPos = getPosition(target);<br>var mousePos = mouseCoords(ev);<br>return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br>} <br>//Get the mouse offset relative to the parent node<br>function getPosition(e){<br>var left = 0;<br>var top = 0;<br>while (e.offsetParent){<br> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br> top += e.offsetTop + (e.currentStyle?(parseInt( e.currentStyle.borderTopWidth)).NaN0():0);<br> e = e.offsetParent;<br>}<br>left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle. borderLeftWidth)).NaN0():0);<br>top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br>return {x :left, y:top};<br>}<br>//Mouse movement penalty function<br>function mouseMove(ev){<br>ev = ev||window.event;<br>var tar = ev .target||ev.srcElement;<br>var mousePos = mouseCoords(ev);<br>var rootar = tar.parentNode;<br>var mouseOf = getPosition(rootar);<br>//Judge status<br> if(iMouseDown&&mouseOff){<br> var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;<br> var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;<br> var conLeft = mousePos.x -mouseOff.x;<br> var conTop = mousePos.y-mouseOff.y;<br> if(conLeft>=mouseOf.x&&conLeft<=limLefX){<br /> helper.style.left = mousePos.x-mouseOff. x;<br /> }<br /> if(conTop>=mouseOf.y&&conTop<=limBottomY){<br /> helper.style.top = mousePos.y-mouseOff.y;<br />}<br />}<br />}<br /><br />//The function of mouse button up<br />function mouseUp(){<br />iMouseDown = false;<br />}<br /><br />//Press Function of down mouse button<br />function mouseDown(ev){<br />iMouseDown = true;<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />if(tar.getAttribute("cut")){<br /> var hmouseOff = getPosition(tar);<br /> helper.style.left = hmouseOff.x;<br /> helper.style.top = hmouseOff.y; <br /> mouseOff = getMouseOffset(tar,ev);<br />}<br />}<br />//Listening events <br />document.onmouseup = mouseUp;<br />document.onmousemove = mouseMove;<br />document. onmousedown = mouseDown;<br />window.onload=function(){<br />target = document.getElementById("image");<br />createContainer(target);<br />}<br /></script>