I need help with my Logic (Resize an image)

Hey Guys!!

I'm trying to put some PHP code to resize an image.

Basically users upload an image. And that image gets placed on a PDF document but I need to limit how big (Pixels) that image is. If it's height is too large it will push the contents on to the 2nd page. Which I don't want.


Currently, I have this code which works to some extent but what I want is if the width of the picture is more than 80 that's totally ok as it doesn't push the page down.:

But then again I wanna make sure the width doesn't exceed 480 pixels if so I wanna scale it down.

Like I want to limit height to 80 and width to 480 if greater then scale in aspect ratio (without skewing it) down to these.

Any help or advice would be greatly appreciated.

        function imageResize($imageResourceId,$width,$height) {
            $ratio = $width/$height; // width/height
            if( $ratio > 1) {
                $targetWidth = 80;
                $targetHeight = 80/$ratio;
            }else {
                $targetWidth = 80*$ratio;
                $targetHeight = 80;
            }
            $targetLayer=imagecreatetruecolor($targetWidth,$targetHeight);
            imagecopyresampled($targetLayer,$imageResourceId,0,0,0,0,$targetWidth,$targetHeight, $width,$height);
            return $targetLayer;
        }

PHP:

 

Try this:
Don't supply width and height of image. Instead supply max width and max height that is allowed.
$im is same as $imageResourceId


function imageResize($im, $maxWidth=480, $maxHeight=80) {

$width= imagesx($im);
$height= imagesy($im);

if( $width > $maxWidth ){
$tw= $maxWidth;
$th= round( ( $maxWidth * $height )/$width ,0);
}elseif( $height > $maxHeight ){
$th= $maxHeight;
$tw= round( ($maxHeight*$width)/$height ,0);
}else{
$tw= $width;
$th= $height;
}

$targetLayer=imagecreatetruecolor($tw, $th);
imagecopyresampled($targetLayer, $im,0,0,0,0, $tw,$th, $width,$height);
return $targetLayer;
}

 

I changed it to this. Im testing it now to see if it works or not

        function imageResize1($imageResourceId,$width,$height) {
            $ratio = $width/$height; // width/height
            $widthlimit = 480;
            $heightlimit = 80;
            $targetratio = $widthlimit/$heightlimit;
            if( $ratio > $targetratio ) {
                $targetWidth = $widthlimit;
                $targetHeight = $widthlimit/$ratio;
            }else {
                $targetWidth = $heightlimit*$ratio;
                $targetHeight = $heightlimit;
            }
            $targetLayer=imagecreatetruecolor($targetWidth,$targetHeight);
            imagecopyresampled($targetLayer,$imageResourceId,0,0,0,0,$targetWidth,$targetHeight, $width,$height);
            return $targetLayer;
        }

PHP:

 

THANKS for your suggestion about imagesx function. I didn't know about it.

ahh my code didn't work. I'll try your way.

 

With the new function you posted, your images will skew badly.

Did you tried the function I posted?

 

I updated this

it was like this:
$ratio < $targetratio

now it's this
$ratio > $targetratio

it's working now.

I'll give your code a try. it should also work. Im still getting my head around it.

 

I learnt something else more important... actually don't need to limit this at all but it does help save on space when users upload images.

But I learnt that at the time of inserting the image you can do this:

<img src="path" style="max-height: 80px; max-width: 480px;" />

I researched online and it said it does keep the aspect ratio. and limits the image which is what I needed.

 

The big problem here with your logic is you're trying to use ONE ratio instead of scaling, with an ELSE when it should be "and" style logic where BOTH checks for both directions needs be made.

// note, round off, there's no such thing as fractional pixels

$targetWidth = $width;
$targetHeight = $height;

if ($targetWidth > 480) {
	$ratio = 480 / $targetWidth;
	$targetWidth = round($targetWidth * $ratio);
	$targetHeight = round($targetHeight * $ratio);
}
if ($targetHeight > 80) {
	$ratio = 80 / $targetHeight;
	$targetWidth = round($targetWidth * $ratio);
	$targetHeight = round($targetHeight * $ratio);
}

Code (markup):

Is the logic you want when setting max-width and max-height whilst preserving aspect ratio. Check one direction, scale to that, THEN check the other direction and scale to that. Right now the way your logic is working if the result of the width correction is over the height correction, the height never gets done!

... and yes, you can limit the size client-side, but don't send massive images client-side if it can be avoided. Though with retina displays and varying dpi, 2x the target resolution is increasingly common. Take a look at the <picture> tag to see how you can now declare multiple images in multiple sizes so you're only using the bandwidth you NEED to use on your pages.