SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Cropping using a different aspect ratio

    Hi there,

    I have two image sizes in my site: a small square thumbnail (50x50 px), and a bigger, wider "preview" size one (240x145 px)

    I need all kinds of images to perfectly match the aspect ratio of the thumbnail/preview image sizes I'm using.

    For square thumbnails, I coded something that could crop a square from the center of any image, so I can re size it later with no issues:
    Code PHP:
    $source_image = array('height' => 0,
    					  'width' => 0,
    					  'path' => './images/picture.jpg'
    					  );
     
    list($source_image['width'], $source_image['height']) = getimagesize($source_image['path']);
     
     
    $crop = array('x_axis' => 0,
    			  'y_axis' => 0,
    			  'width' => $source_image['width'],
    			  'height' => $source_image['height']
    			  );
     
     
    // resize to 1:1 aspect ratio
     
    if( $source_image['width'] > $source_image['height'] )
    {
    	$crop['x_axis'] = floor( ( $source_image['width'] - $source_image['height'] ) / 2 ); 
    	$crop['width'] = $source_image['height'];
    }
    else if( $source_image['height'] > $source_image['width'] )
    {
    	$crop['y_axis'] = floor( ( $source_image['height'] - $source_image['width'] ) / 2 );
    	$crop['height'] = $source_image['width'];
    }
    /*
    ... cropping code goes here ...
    */

    But how do I do the same for the wider aspect ratio? Not only I don't how how to crop based on my 240x145 px image's aspect ratio, but I don't even know how to calculate its aspect ratio in the first place.

    Any ideas?

    Your help is much appreciated

  2. #2
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
        define('MAX_X'240);
        
    define('MAX_Y'145);

        if (
    $original_x MAX_X || $original_y MAX_Y) {
            if (
    MAX_X $original_x MAX_Y $original_y) {
                
    $factor MAX_X $original_x;
            } else {
                
    $factor MAX_Y $original_y;
            }
        } else {
            
    $factor 1;
        }

        
    $new_x floor($original_x $factor);
        
    $new_y floor($original_y $factor); 

  3. #3
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid I don't understand the logic you've used here.

    Are $new_x and $new_y the place where you should start cropping from? if so:
    1) They don't seem incorrect. The coordinates don't seem to crop the center of the image.
    2) how do I find out the width/height of the part I'm supposed to crop?

  4. #4
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror View Post
    I'm afraid I don't understand the logic you've used here.

    Are $new_x and $new_y the place where you should start cropping from? if so:
    1) They don't seem incorrect. The coordinates don't seem to crop the center of the image.
    2) how do I find out the width/height of the part I'm supposed to crop?
    No. They are the width and height of your crop area (thumbnail size), with correct aspect ratio, not exceding the MAX_X and MAX_Y.

    To calculate the coordinates:

    PHP Code:
    $offset_x round(($original_x $new_x) / 2);
    $offset_y round(($original_y $new_y) / 2); 

  5. #5
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but I'm trying to crop the center area that matches the ratio of the preview version, not the number of pixels, (just like I did with the square thumbnail) and then resize it to 240x145 pixels.

    I hope this clarifies my question.

  6. #6
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror View Post
    but I'm trying to crop the center area that matches the ratio of the preview version, not the number of pixels, (just like I did with the square thumbnail) and then resize it to 240x145 pixels.

    I hope this clarifies my question.
    Oh, I misunderstood you.

    PHP Code:
        define('MAX_X'240);
        
    define('MAX_Y'145);
        
        
    $thumbnail_aspect_ratio MAX_X MAX_Y;

        if (
    $original_x MAX_X || $original_y MAX_Y) {
            if (
    MAX_X $original_x MAX_Y $original_y) {
                
    $new_x round($original_y $thumbnail_aspect_ratio);
                
    $new_y $original_y;
            } else {
                
    $new_x $original_x;
                
    $new_y round($original_x $thumbnail_aspect_ratio);
            }
        } else {
            
    $new_x $original_x;
            
    $new_y $original_y;    
        }

        
    $offset_x round(($original_x $new_x) / 2);
        
    $offset_y round(($original_y $new_y) / 2); 

  7. #7
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    decowski, I appreciate your efforts, but your code doesn't seem to be working for me.

    I'm wondering why are you still using the dimensions I've provided in your code's logic when I'm just looking to use the aspect ratio?

  8. #8
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror View Post
    decowski, I appreciate your efforts, but your code doesn't seem to be working for me.
    Have you actually tried and used the code? I've done some tests and it works here.

    Quote Originally Posted by mPeror View Post
    I'm wondering why are you still using the dimensions I've provided in your code's logic when I'm just looking to use the aspect ratio?
    I'm using them to calculate the aspect ratio and to see if we need to adjust the height or the width of the cropping area to keep the aspect ratio.

    Basically, if you want to match the aspect ratio of the thumbnail to the one of original image, without distorting it, you either need to pillarbox it (remove parts on the left and right hand side) or letterbox it (remove the parts on the top and bottom). What my script does is calculate the width, height and offsets required to do so.

  9. #9
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm afraid I've tried your script.

    The coordinates I'm getting seem a bit off. But I can't really test it if I don't have how many pixels I'm supposed to crop. Your script shows me where to start cropping, but not how much to crop. (correct me if I'm wrong)

  10. #10
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does. $new_x and $new_y are the width and height of cropping area.


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
  •