Welcome Guest, Not a member yet? Register   Sign In
Image cropping challenge
#1

[eluser]KeyStroke[/eluser]
Hi,

Here's the challenge I'm facing:
I have a 240x145 pixels thumbnail size for pictures uploaded to my site. I need to crop an uploaded image from the center, and the resulting image's aspect ratio should match my thumbnail's aspect ratio, so that, when the image gets resized while maintaining its aspect ratio, it will fit EXACTLY my thumbnail size.

What I've tried so far:
- using a jquery plugin that lets the user which part of the image should be displayed in thumbnails, but that was too complicated for my users.
- Coded a script that does what I'm trying to achieve, but for square images only.

Note that this functionality will be part of a CI photo library I'm releasing soon, so your contribution will help everyone here. Smile

Your help is much appreciated
#2

[eluser]Colin Williams[/eluser]
1.) Use ratio to calculate proper dimensions of full photo.
2.) Subtract half of target dimension x from half of orignal image width. This is $config['x_axis']
3.) Subtract half of target dimension y from half of orignal image height. This is $config['y_axis']
4.) Note that one of these should be zero (or both if the image is perfectly rationed already)
5.) Crop the image, using the proper dimensions you calculated in Step 1 and the x_axis and y_axis you calculated in 2 and 3
#3

[eluser]Greendots[/eluser]
Think this might do the trick. (Credited original author)

Code:
//Author Alan Reddan Silverarm Solutions
        //Date 27/01/2005
        //Function that works well with images.
        //It takes the image and reduces its size to best fit. i.e If you have an image
        //that is 200 X 100 and you want a thumbnail of 75 X 50,
        //it first resizes the image to 100 X 50
        //and then takes out a portion 75 X 50 from then center of the input image.
        //So loads of image information is retained.
        //The corollary also holds if your input image is 100 X 200
        //it first resizes image to 75 X 150 and then takes out a
        //portion 75 X 75 from the centre
        // The advantage here is that function decides on whether
        //resize is by width or height itself.
        //it also decides whether to use the height or the width as the base start point
        //in the case that athumbnail is rectangular

        function resize_then_crop( $filein,$fileout,$extension,$imagethumbsize_w,$imagethumbsize_h,$red,$green,$blue)
        {
        
        $percent = 0.5;
        // Get new dimensions
        list($width, $height) = getimagesize($filein);
        $new_width = $width * $percent;
        $new_height = $height * $percent;
        
        
        switch ($extension)
        {
            case '.jpg': case '.JPG': case '.JPEG': case '.jpeg':
                $format = 'image/jpeg';
                $image = imagecreatefromjpeg($filein);
            break;
        
            case '.gif': case '.GIF':
                $format = 'image/gif';
                $image = imagecreatefromgif($filein);
              break;
                
            case '.png': case '.PNG':
                $format = 'image/png';
                $image = imagecreatefrompng($filein);
            break;
        }
        
        $width = $imagethumbsize_w ;
        $height = $imagethumbsize_h ;
        list($width_orig, $height_orig) = getimagesize($filein);
        
        if ($width_orig < $height_orig) {
          $height = ($imagethumbsize_w / $width_orig) * $height_orig;
        } else {
            $width = ($imagethumbsize_h / $height_orig) * $width_orig;
        }
        
        if ($width < $imagethumbsize_w)
        //if the width is smaller than supplied thumbnail size
        {
        $width = $imagethumbsize_w;
        $height = ($imagethumbsize_w/ $width_orig) * $height_orig;;
        }
        
        if ($height < $imagethumbsize_h)
        //if the height is smaller than supplied thumbnail size
        {
        $height = $imagethumbsize_h;
        $width = ($imagethumbsize_h / $height_orig) * $width_orig;
        }
        
        $thumb = imagecreatetruecolor($width , $height);
        $bgcolor = imagecolorallocate($thumb, $red, $green, $blue);  
        ImageFilledRectangle($thumb, 0, 0, $width, $height, $bgcolor);
        imagealphablending($thumb, true);
        
        imagecopyresampled($thumb, $image, 0, 0, 0, 0,
        $width, $height, $width_orig, $height_orig);
        $thumb2 = imagecreatetruecolor($imagethumbsize_w , $imagethumbsize_h);
        // true color for best quality
        $bgcolor = imagecolorallocate($thumb2, $red, $green, $blue);  
        //ImageFilledRectangle($thumb2, 0, 0,    $imagethumbsize_w , $imagethumbsize_h , $white);
        ImageFilledRectangle($thumb2, 0, 0,    $imagethumbsize_w , $imagethumbsize_h , $bgcolor);
        imagealphablending($thumb2, true);
        
        $w1 =($width/2) - ($imagethumbsize_w/2);
        $h1 = ($height/2) - ($imagethumbsize_h/2);
        
        imagecopyresampled($thumb2, $thumb, 0,0, $w1, $h1,
        $imagethumbsize_w , $imagethumbsize_h ,$imagethumbsize_w, $imagethumbsize_h);
        
        //Error, this will always return true.
        
        // Output
        //header('Content-type: image/gif');
        //imagegif($thumb); //output to browser first image when testing
        
        switch ($extension)
        {
            case '.jpg': case '.JPG': case '.JPEG': case '.jpeg':
                imagejpeg($thumb2, $fileout,100);
            break;
        
            case '.gif': case '.GIF':
                imagegif($thumb2, $fileout) ;
              break;
                
            case '.png': case '.PNG':
                imagepng($thumb2, $fileout, 100);
            break;
        }
        
    
        return true ;
        //header('Content-type: image/gif');
        //imagegif($thumb2); //output to browser
        }
#4

[eluser]Colin Williams[/eluser]
Greendots, I originally was going that route with my logic but it goes straight from fullsize to thumbnail. KeyStroke just needs to crop the original image to the max dimensions of a given ratio. The scale down to thumbnail size will be trivial.
#5

[eluser]KeyStroke[/eluser]
Thanks a lot Greendots and Collin Williams. Smile

Collin, you're correct. I have the cropping and resizing functionality in two different methods to increase my class's flexibility. But at least this will be something that we could resort to if other solutions didn't work.

Anyhow, I'm going to test both solutions once I go back home, and report the results back here. Smile
#6

[eluser]KeyStroke[/eluser]
Quote:1.) Use ratio to calculate proper dimensions of full photo.
I was about to implement your solution first, but I have no idea to perform this step. Will you (or anyone else) help please? Smile

I'm calculating the target ratio by dividing my thumbnail's width by it's height. I have no idea what to do afterwards.

I'm going to try the other solution now while waiting for a response. Smile
#7

[eluser]KeyStroke[/eluser]
The other one produces a perfectly fine image! thanks Greendots. Smile

I'm still interested in your solution Colin, since it allows me to separate resizing from cropping in my class.
#8

[eluser]Colin Williams[/eluser]
Cross-multiply and divide. Very simple algebra... like, 5th or 6th grade.

Code:
$ratio_x = 240;
$ratio_y = 145;
list($image_x, $image_y) = getimagesize($image_filepath);

if ($ratio_x > $ratio_y)
{
   $image_y = ($image_x * $ratio_y) / $ratio_x;
}
else
{
   $image_x = ($image_y * $ratio_x) / $ratio_y;
}

// Now $image_x and $image_y are the desired proportions for your final photo (one won't have changed)

Actually, there's a bit more to it. You have to make sure the new dimensions aren't larger than the original (you could even check before you started the calculation.)

Do it on paper first, then turn it into code.
#9

[eluser]Shahgeb[/eluser]
use create_resized_image() with paramter of maintain ration and thumnail= true and desired width and height
using library image_lib
hope it will work
#10

[eluser]Colin Williams[/eluser]
I think you missed some of the requirements, amjadfarooq. There's much more going on.




Theme © iAndrew 2016 - Forum software by © MyBB