Image Cropper / Resizer

Poppa Pimp · #1 (**permalink**) 12-09-06, 04:28 PM

The URL of the page this is on in my site is http://poppa-pimps-wallpapers.com//ImageResizer.php You can click on browse and get image,but when you upload image it will go to another page and says ((unable to create emp directory)) Here is a site to be able to see script work http://tech.tailoredweb.com/image-editor-52/ and can be DL from there also. I am using FP 2003 and geocities pro Domain site. The script is as follows

PHP Code:

<? session_start(); $refresh=$_SESSION["REFRESHED"]=($_SESSION["REFRESHED"])?0:1; $imgsrc = ($_REQUEST["imgsrc"])? $_REQUEST["imgsrc"]: "sample.jpg"; if (strpos($imgsrc,"sample.jpg")>0) $imgfile = "sample.jpg"; else $imgfile = substr($imgsrc, strpos($imgsrc,"/img_edt")); $__min=base64_decode("RGV2ZWxvcGVkIEJ5IDxhIGlkPSJfX2tpbSIgaHJlZj0iaHR0cDovL3RlY2guY2l0eXBvc3QuY2EiPkNpdHlQb3N0LmNhPC9hPg==") ?> <html> <head> <style> img {border:none;} body,table,td {font-family:Arial;font-size:12px} form {display:inline;} </style> <title>Image Cropper / Resizer</title> <script> var isIE = (document.all)? true:false; var minHeight=40, minWidth=40; var canvasEl, imageEl, selector; var oldX, oldY; var mouseMoved; document.onmousedown = mouseDown; document.onmousemove = mouseMove; document.onmouseup = mouseUp; //------------ FUNCTIONS FOR DRAG AND DROP ---------------------------- //------------- mouseDown, mouseMove, mouseUp, -------------- //------------- grabEl, moveEl, dropEl -------------- function mouseDown(e) { e = (!e)? window.event : e ; var targetEl = (isIE)? e.srcElement : e.target; while (targetEl.id != "image") { targetEl = targetEl.parentNode; if (targetEl == null) { return } } if (targetEl.id=="image") { canvasEl = document.getElementById("canvas"); imageEl = document.getElementById("image"); selector = document.getElementById("selector"); oldX = (e.clientX + document.body.scrollLeft); oldY = (e.clientY + document.body.scrollTop); mouseMoved=false; } else imageEl == null; if (isIE) e.returnValue = false; else e.preventDefault(); } function mouseMove(e) { e = (!e)? window.event : e ; if (imageEl == null) { return }; mouseMoved = true; var imageW = parseInt(imageEl.width, 10 ); var imageH = parseInt(imageEl.height, 10 ); var newX = (e.clientX + document.body.scrollLeft ); var newY = (e.clientY + document.body.scrollTop ); var x = oldX+canvasEl.scrollLeft-parseInt(canvasEl.style.left,10); var y = oldY+canvasEl.scrollTop-parseInt(canvasEl.style.top,10); var w = (newX - oldX); var h = (newY - oldY); w = Math.min( w, (imageW-x)); h = Math.min( h, (imageH-y)); w = Math.max( w, 1); h = Math.max( h, 1); selector.style.display = "block"; selector.style.width = w + "px"; selector.style.height = h + "px"; selector.style.left = x + "px"; selector.style.top = y + "px"; document.getElementById("crop").disabled = false; document.resizefrm.width.value = w; document.resizefrm.height.value = h; document.cropfrm.x.value = x; document.cropfrm.y.value = y; document.cropfrm.w.value = w; document.cropfrm.h.value = h; if (isIE) e.returnValue = false; else e.preventDefault(); } function mouseUp(e) { imageEl = null; if (mouseMoved==false) { selector.style.display = "none"; document.getElementById("crop").disabled = true; } } function init() { if (<?=$refresh?>) window.location.reload(); var kim = document.getElementById('__kim'); if (kim==null || kim.tagName != "A" || kim.innerHTML<="" ) { alert("This Image-Editor Version Requires Link To CityPost.ca"); return false; } } </script> </head> <body onload="init()"> <div id="canvas" style="position:absolute;top:5px;left:5px;width:800px;height:590px;border:1px solid black;overflow:auto;"> <div id="selector" style="display:none;position:absolute;border:1px solid blue;font-size:1px;"></div> <img id="image" src="<?=$imgsrc?>" /> </div> <div style="position:absolute;top:5px;left:810px"> <b>HOW TO? 1-2-3</b> <br><br><b>1. Upload Your Image </b> <br><font color=blue><?=$_REQUEST["m1"]?></font> <form method=post action="proc_image_editor.php" ENCTYPE="multipart/form-data"> <input type=file name=imgfile size=10/> <button type=submit name="upload">Upload Image</button> </form> <br><br><b>2. Resize or Crop</b> <form name=resizefrm method=post action="proc_image_editor.php"> <br>  - Drag mouse or type numbers <table cellpadding=0 cellspacing=0> <tr><td colspan=4> <font color=blue><?=$_REQUEST["m2"]?></font> <tr> <td>w:<td><input id="width" name="width" size=1/> <td>h:<td><input id="height" name="height" size=1/><br> <tr><td><td colspan=3> <input type="hidden" id="imgfile" name="imgfile" value="<?=$imgfile?>" /> <button type=submit id="resize" name="resize" value="1">       Resize     </button> </table> </form> <form name=cropfrm method=post action="proc_image_editor.php"> <table cellpadding=0 cellspacing=0> <tr><td colspan=4> <font color=blue><?=$_REQUEST["m3"]?></font> <tr> <td>x: <td><input name="x" id="x" size=1 readonly> <td>y: <td><input name="y" id="y" size=1 readonly> <tr> <td>w: <td><input name="w" id="w" size=1 readonly> <td>h: <td><input name="h" id="h" size=1 readonly> <tr><td><td colspan=3> <input type="hidden" id="imgfile" name="imgfile" value="<?=$imgfile?>" /> <button type=submit id="crop" name="crop" value="1" disabled> Crop Selection</button> </table> </form> <? if ($imgsrc!=="sample.jpg") { ?> <br><b>3. Save </b> <br><button onclick="window.location.href='proc_download.php?fl=<?=$imgsrc?>'"> Download Image </button> <br><br><b>4. Go Back </b> <font color=blue><?=$_REQUEST["m4"]?></font> <form action="proc_image_editor.php"> <input type="hidden" id="imgfile" name="imgfile" value="<?=$imgfile?>" /> <button type=submit id="recall" name="recall" value="1"> Recall Original </button> </form> <? }?> <br>Image url : <?=$imgfile?> <br> <br><?=$__min?> <br><?include "/var/www/tech/_google_180_150.inc"?> </div> </body>