SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make an image scale to fit a sized html element ?

    How do I make sure the scaled image will fit in, say a div tag with width = 78 and height = 62 ?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can check an image size with getimagesize().
    If possible, you don't want to do this on the fly. You should do it once, and if any adjustment is needed, resize the image and save it. Image resizing is slow and memory intensive.

    You may also be able to just get clever with html/css to achieve your desired results.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post
    . Image resizing is slow and memory intensive.
    I think I should store the OR and the resized image at the point user upload it in database so the resized image will be reused when called without doing resizing every time.

    Quote Originally Posted by crmalibu View Post
    You may also be able to just get clever with html/css to achieve your desired results.
    This is the first thing I found when searching about image resize, the problem of this method is it will load the full size image then let html tag adjust the size, which is going to be incredibly slow when loading a list of 20 products with 20 dedicate thumbnails or maybe more.

  4. #4
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Merry Christmas...

    PHP Code:
    <?php
    class PAMWF_ImageHandler
    {
        protected 
    $sourcePath '';
        protected 
    $image null;
        protected 
    $destination null;
        protected 
    $type '';
        protected 
    $currentHeight 0;
        protected 
    $currentWidth 0;
        
        public function 
    load$file )
        {
            
    $this->sourcePath $file;
        
            if(empty(
    $type))
            {
                
    $type strtolower(pathinfo($filePATHINFO_EXTENSION));
            }
            
            
    $imageAttributes getimagesize($this->sourcePath);
            
    $this->currentHeight $imageAttributes[1];
            
    $this->currentWidth $imageAttributes[0];
            
            switch (
    $imageAttributes['mime'])
            {
                case 
    'jpg':
                case 
    'jpeg':
                case 
    'image/jpeg':
                    
    $this->type 'jpeg';
                    
    $this->image = @imagecreatefromjpeg($this->sourcePath);
                break;
                case 
    'png':
                case 
    'image/png':
                    
    $this->type 'png';
                    
    $this->image = @imagecreatefrompng($this->sourcePath);
                break;
                case 
    'gif':
                case 
    'image/gif':
                    
    $this->type 'gif';
                    
    $this->image = @imagecreatefromgif($this->sourcePath);
                break;
            }
            
            if (!
    $this->image)
            {
                throw new 
    PAMWF_ImageHandlerException('PHP was unable to load Image');
            }
            
        }
        
        public function 
    clear()
        {
            if (
    is_resource($this->image))
            {
                
    imagedestroy($this->image);
            }
            
            if (
    is_resource($this->destination))
            {
                
    imagedestroy($this->destination);
            }
            
    $this->sourcePath '';
            
    $this->image null;
            
    $this->destination null;
            
    $this->type '';
            
    $this->currentHeight 0;
            
    $this->currentWidth 0;    
        }
        
        public function 
    resize$targetHeight$targetWidth$trim false$secondPass false )
        {
            if ( (
    $targetHeight && $targetWidth ) && 
                (
    $targetHeight <= $this->currentHeight || $targetWidth <= $this->currentWidth
            )
            {
                
    $heightRatio $targetHeight $this->currentHeight;
                
    $widthRatio $targetWidth $this->currentWidth;

                
    ## If we are trimming we want the short side to fit to match it's target.
                ## If we aren't trimming we want the long side to fit to it's target.
                
    $ratio = ($this->currentHeight >= $this->currentWidth && !$trim ) ? $heightRatio $widthRatio;
                
                
    $newHeight floor$this->currentHeight $ratio );
                
    $newWidth floor$this->currentWidth $ratio );
        
                if (
    $secondPass)
                {
                    
    $this->destination imagecreatetruecolor$targetWidth$targetHeight );            
                }
                else
                {
                    
    $this->destination imagecreatetruecolor$newWidth$newHeight );        
                }
                
                
    imagecopyresampled(
                    
    $this->destination
                    
    $this->image,
                    
    0000// Coordinate settings are unused by this class. 
                    
    $newWidth,
                    
    $newHeight
                    
    $this->currentWidth
                    
    $this->currentHeight
                
    );
                
                
    $this->image $this->destination;
                
    $this->destination null;
                
    $this->currentHeight $newHeight;
                
    $this->currentWidth $newWidth;
                
                if (!
    $secondPass && $trim && ( $newHeight $targetHeight || $newWidth $targetWidth ) )
                {
                    
    $this->resize($targetHeight$targetWidthtruetrue );
                }
            }
        }
        
        public function 
    save $path$type null$compression 100 )
        {
            if (empty(
    $type))
            {
                
    $type $this->type;
            }
            
            if (empty(
    $compression))
            {
                
    $compression 100;
            }
            
            switch (
    $type)
            {
                case 
    'jpg':
                case 
    'jpeg':
                case 
    'image/jpeg':
                    
    imagejpeg($this->image$path$compression);
                break;
                case 
    'png':
                case 
    'image/png':
                    
    imagepng($this->image$path);
                break;
                case 
    'gif':
                case 
    'image/gif':
                    
    imagegif($this->image$path);
                break;
            }
        }
    }
    ?>
    Basic Usage...

    PHP Code:
    <?php
    $resizer 
    = new PAMWF_ImageHandler();
    $resizer->load($PathToMyFile);
    $resizer->resize($targetHt$targetWidth);
    $resizer->save($PathToSave);

    // If you want to reuse the resizer
    $resizer->clear();
    ?>
    Notes - The resizing is a fit to area operation. It will match up long sides of the image and resize down if you don't tell it to trim. If you do tell it to trim then it will resize the image down to where the short sides match, then it blindly chops off the excess. I don't recommend this but I programmed it in since the client wanted that behavior when I wrote the class.

    The save method takes a path, a type and compression ratio for arguments. You only need to provide the path to save the file to - the type is assumed to be the same we started with (gifs to gifs, jpegs to jpegs, etc), but the class is capable of converting across types. The third argument is only relevant when you are saving jpeg files. 80% is typical but note the class' default is 100% (again, a relic of client request - set it to whatever you want).

    Code is provided as is, without warranty, yadda yadda yadda...

  5. #5
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Merry Christmas.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •