Image ratio size

Hello

I am working on a php/mysql script where users can submit images.

How can I set ratios of the image depending on the width.

e.g if an image is 600x300, it will automatically resize itself down to fit my content box.

<?php

class Image_Batch_Processor {

    private $srcDir;
    private $outDir;
    private $maxWidth;
    private $maxHeight;

    /* -----------------------------------------------------------
     * Class Constructor
      ----------------------------------------------------------- */

    public function __construct($srcDir, $outDir, $maxWidth, $maxHeight) {
        $this->srcDir = $srcDir;
        $this->outDir = $outDir;
        $this->maxWidth = $maxWidth;
        $this->maxHeight = $maxHeight;
    }

    /* -----------------------------------------------------------
     * Accessors
      ----------------------------------------------------------- */

    public function setSrcDir($srcDir) {
        $this->srcDir = $srcDir;
    }

    public function setOutDir($outDir) {
        $this->outDir = $outDir;
    }

    public function setMaxWidth($maxWidth) {
        $this->maxWidth = $maxWidth;
    }

    public function setMaxheight($maxHeight) {
        $this->maxHeight = $maxHeight;
    }

    public function getSrcDir($srcDir) {
        return $this->srcDir;
    }

    public function getOutDir($outDir) {
        return $this->outDir;
    }

    public function getMaxWidth($maxWidth) {
        return $this->maxWidth;
    }

    public function getMaxheight($maxHeight) {
        return $this->maxHeight;
    }

    /* -----------------------------------------------------------
     * Class Methods
      ----------------------------------------------------------- */

    public function resize($imgsArr) {
        foreach ($imgsArr as $file) {
            $image = $this->srcDir . $file;
            $outFile = $this->outDir . $file;

            //get the original image attributes
            $size = GetImageSize($image);
            $width = $size[0];
            $height = $size[1];
            $imageType = $size[2];

            //scaling factors
            $xRatio = $this->maxWidth / $width;
            $yRatio = $this->maxHeight / $height;

            //calculate the new width and height
            if ($width <= $this->maxWidth && $height <= $this->maxHeight) {//image does not need resizing
                $toWidth = $width;
                $toHeight = $height;
            } else if ($xRatio * $height < $this->maxHeight) {
                $toHeight = round($xRatio * $height);
                $toWidth = $this->maxWidth;
            } else {
                $toWidth = round($yRatio * $width);
                $toHeight = $this->maxHeight;
            }

            //create the resized image
            //Type of image  1=GIF  2=JPG 3=PNG 4=SWF 5=PSD 6=BMP 7=TIFF(intel byte order) 8=TIFF(motorola byte order) 9=JPC 10=JP2 11=JPX 12=JB2 13=SWC 14=IFF 15=WBMP 16=XBM
            $newImage = ImageCreateTrueColor($toWidth, $toHeight); //create the new image canvas
            switch ($imageType) {
                case 1:  //gif file
                    $oldImage = ImageCreateFromGif($image);
                    break;

                case 3:  //png file
                    $oldImage = ImageCreateFromPng($image);
                    break;

                default: //jpg file
                    $oldImage = ImageCreateFromJpeg($image);
                    break;
            }

            ImageCopyResampled($newImage, $oldImage, 0, 0, 0, 0, $toWidth, $toHeight, $width, $height); //resize the new image
            //output the new resized image
            switch ($imageType) {
                case 1:  //gif file
                    header('Content-type: image/gif');
                    ImageGif($newImage, $outFile);
                    break;

                case 3:  //png file
                    header('Content-type: image/png');
                    ImagePng($newImage, $outFile);
                    break;

                default: //jpg file
                    header('Content-type: image/jpeg');
                    ImageJpeg($newImage, $outFile);
                    break;
            }

            //clean up resources
            ImageDestroy($oldImage);
            ImageDestroy($newImage);
        }
    }

}

//end of class
//----------------------------------------------------------
//testing code

$imgA = array('pic1.jpg', 'pic2.jpg', 'pic3.jpg');

$batch_processor = new Image_Batch_Processor('./', './junk/', 100, 100);
$batch_processor->resize($imgA);

echo 'done';
?>

Or with imagemagick you can do it with one line:


exec("convert input -resize 400x output");

input can be one of over 100 formats, 400 is the desired width of your new image and the output again can be one of over 100 formats - assuming Imagemagick has been installed with the format support.

“one line”?

If you go look at how many lines of code are actually run when that command is called I think you’ll find it’s a lot more than 1 line :).

If you build your own class you can then stick it in a separate library file somewhere and call it with “one line” as well. And you don’t need Imagemagic at all.

Unfortunately, I do not have imagemagick installed.

Is it possible to simply resize the image using the html height, width attributes instead of resizing the actual image?

You can do BUT you are still downloading the full size image and the browser is reszing it and the qulity is unlikly to be as good as a graphics program doing it.

<img src="image.jpg" width="600">

Why not resize on your PC if you do not want to do it on the serever?

Yes it is. If you specify either just the width or the height in the <img> then the browser calculates the value for the other dimension and maintains the original aspect ratio of the image. If you specify both the width and height, then the new dimensions need to have the same aspect ratio of the original otherwise the image will be distorted.

The php class I posted earlier calculates the new width and height for an image to fit within a user defined box and still maintain the original aspect ratio. eg…say the images were 300px x 200px. The class example calculates new width and height to fit the image within a 100px x 100px container and still maintain an aspect ratio of 3:2.

In my experience, any reduction in image quality is not noticeable on a screen.