js + php dynamic image resize

[evanct]

didn't know whether to post this on the php or javascript forum, it deals with both...

okay, so I'm trying to make image resizing functionality to an image that has already been uploaded and saved. the hard part is enabling a preview image that immediately resizes upon selection of a resize value. the image quality slider at http://imgur.com (upload an image with "Edit" checked) is pretty much what I want, except obviously with size dimensions instead of quality.

 

there is a jquery Slider that holds the values 10-125 as percentages of the image size. when the user moves the slider, the value should be sent to a php script that uses it to resize the image, then the image data is passed to preview.php via session, and preview.php should output it directly.

 

here's the js:

 

var tmp_name=<?php echo $_GET['itemid']; ?>; //filename of the image//
var process = "core/image.php?itemid=" + tmp_name + "&";
jQuery(window).load(function() {
			$(function() {
					   $('#slider').slider({
										   value:100,
										   min:10,
										   max:125,
										   step:5,
										   slide:function(event,ui) {
											   $('#size').val(ui.value)
										   },
										   change:updateSize
										   });
					   $("#size").val($("#slider").slider("value"))
					   })
});

function showCoords(c)
		{
			jQuery('#x').val(c.x);
			jQuery('#y').val(c.y);
			jQuery('#x2').val(c.x2);
			jQuery('#y2').val(c.y2);
			jQuery('#w').val(c.w);
			jQuery('#h').val(c.h);
		};

		function updateSize() {
    $.post(process + "size=" + $("#size").val(), "",
    function(data) {
        if (!isNaN(data)) {
            $("#size").html(data)
        }
        showThumb()
    },
    "html")
}

function showThumb() {
$("#imgcontainer").html("<img id='crop' src='include/preview.php' /\>");
$('#crop').Jcrop({
			 onChange:showCoords,
			 onSelect:showCoords
			 });
}

 

core/image.php:

 

<?php
session_start();
global $session,$item;
$path='../users/'.$session->username.'/'.$item->album.'/'.$_GET['itemid']; //path to saved image//
list($width,$height)=getimagesize($path);
$newwidth=$width*(0.01*$_GET['size']);
$newheight=$height*(0.01*$_GET['size']);
$ext=substr(strrchr($_GET['itemid'],'.'),1);
$tmp=$this->imgCreate($ext,$path); //imagecreatefromjpeg, imagecreatefrompng, or imagecreatefromgif based on the extension//
$img=imagecreatetruecolor($newwidth,$newheight);
	imagecopyresampled($tmp,$img,0,0,0,0,$newwidth,$newheight,$width,$height);
$_SESSION['prev']=$img;
$_SESSION['ext']=$ext;
?>

 

include/preview.php:

 

<?php
session_start();
switch ($_SESSION['ext']) {
case 'jpg':
case 'jpeg':
header('Content-type:image/jpeg');
imagejpeg($_SESSION['prev'],90);
imagedestroy($_SESSION['prev']);
break;
case 'png':
header('Content-type:image/png');
imagepng($_SESSION['prev']);
imagedestroy($_SESSION['prev']);
break;
case 'gif':
header('Content-type:image/gif');
imagegif($_SESSION['prev']);
imagedestroy($_SESSION['prev']);
break;
}

unset($_SESSION['prev']);
unset($_SESSION['ext']);
?>

 

and the html:

 

<div id='imgcontainer'>
<img src='img/load.gif' />
</div>
<br/>
<div id='slider' >
</div>
<br/>

 

when I move the slider the placeholder load.gif disappears, which is good, but nothing replaces it, which is bad. are there any glaring flaws here i'm overlooking? or is there a way to concievably debug this, because i can't think of one.