Jump to content

Image Resize Difficulty


imperium2335

Recommended Posts

Hi,

 

I have an interface where the user picks an image to upload, it then uploads the original (big) image.

 

That same image then appears but at a reduced size of 150px max height or width, the size is defined in the img tag using height="XX" width ="XX", so it is the same image file, just with its dimensions set in the html.

 

The user then drags a div over the image to crop it.

 

The problem I am having is getting the reference image crop dimensions to translate to the actual full size image.

 

Have attached an image of what the result is.

 

What formula do I need to get it to translate to the bigger image properly?

 

Here is my code:

if($_GET['mode'] == 'imageupload')
{

$imgNumber = $_GET['img'] ;

$fileName = strtolower($_FILES["setFile$imgNumber"]['name']) ;

$ext = explode('.', $fileName) ;
if($ext[1] != 'jpg' && $ext[1] != 'JPG' && $ext[1] != 'jpeg')
{
	echo "<span class='iFOutput'>Can only accept JPG images.<br /><br /> The image you tried to upload was '" . $ext[1] . "'.</span>" ;
	exit() ;
}

$tmpName = $_FILES["setFile$imgNumber"]['tmp_name'] ;

move_uploaded_file($tmpName, '../uploads/' . $fileName) ;

$sizeInfo = getimagesize('../uploads/' . $fileName) ;

$resizedArray = imageResize($sizeInfo[0], $sizeInfo[1], 204) ;

$finalImageSrc = '../uploads/' . $fileName ;

echo '<img id="image' . $imgNumber . '" src="' . $finalImageSrc . '" width="' . $resizedArray[0] . '" height="' . $resizedArray[1] . '" />' ; // SCALED IMAGE FOR CROPPING INTERFACE

}
elseif($_GET['mode'] == 'imagecrop')
{
$imgSrc = $_POST['imagePath'.$_GET['img']] ;

$thisX1 = $_POST['image' . $_GET['img'] . 'X1'] ;
$thisY1 = $_POST['image' . $_GET['img'] . 'Y1'] ;
$thisX2 = $_POST['image' . $_GET['img'] . 'X2'] ;
$thisY2 = $_POST['image' . $_GET['img'] . 'Y2'] ;

$original = imagecreatefromjpeg($imgSrc) ;

list($width, $height) = getimagesize($imgSrc) ;

if ($width > $height)
{
	$ratio = (150 / $width);
}
else
{
	$ratio = (150 / $height);
}
echo $ratio ;
$thumbCanvas = imagecreatetruecolor(150, 150) ;
$thisX1 = round($thisX1/$ratio) ;
$thisY1 = round($thisY1/$ratio) ;

imagecopyresampled($thumbCanvas, $original, 0, 0, $thisX1, $thisY1, 150, 150, $width, $height) ;

imagejpeg($thumbCanvas, '../uploads/thumbnail.jpg') ;

echo '<img id="image' . $_GET['img'] . '" src="' . '../uploads/thumbnail.jpg' . '" />' ;

}

post-79329-1348240339532_thumb.jpg

Link to comment
Share on other sites

Jesus cake, I figured it out. Here is the solution in case it helps anyone else:

$imgSrc = $_POST['imagePath'.$_GET['img']] ;

$thisX1 = $_POST['image' . $_GET['img'] . 'X1'] ;
$thisY1 = $_POST['image' . $_GET['img'] . 'Y1'] ;
$thisX2 = $_POST['image' . $_GET['img'] . 'X2'] ;
$thisY2 = $_POST['image' . $_GET['img'] . 'Y2'] ;
$original = imagecreatefromjpeg($imgSrc) ;

list($widthOriginal, $heightOriginal) = getimagesize($imgSrc) ;

list($width, $height, $ratio) = imageResize($widthOriginal, $heightOriginal, 204) ;
$thumbCanvas = imagecreatetruecolor(150, 150) ;
$srcX = round($thisX1/$ratio) ;
$srcY = round($thisY1/$ratio) ;

$sWidth = $thisX2 - $thisX1 ;
$sHeight = $thisY2 - $thisY1 ;

imagecopyresampled($thumbCanvas, $original, 0, 0, $srcX, $srcY, 150, 150, $sWidth/$ratio, $sHeight/$ratio) ;

imagejpeg($thumbCanvas, '../uploads/thumbnail.jpg') ;

echo '<img id="image' . $_GET['img'] . '" src="' . '../uploads/thumbnail.jpg' . '" />' ;

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.