My CodeIgniter image manipulation library isn't working the way I want

Question

I have an image. I want its size to be exactly 500x250. I also want to maintain the image ratio. So my plan was to re-size it and then crop. My code for resizing the image is given below.

$config['image_library'] = 'gd2';
$config['source_image'] = './pictures/'.$pic_name;
$config['maintain_ratio'] = TRUE;
$config['width'] = 500;
$this->load->library('image_lib', $config);
$this->image_lib->resize();

After resizing it, the size of the image is 500x768. Then I am trying to crop it. The code for cropping is given below.

$config['image_library'] = 'gd2';
$config['source_image'] = './pictures/'.$pic_name;
$config['x_axis'] = '0';
$config['y_axis'] = '0';
$config['height'] = 250;
$config['width'] = 500;
$this->image_lib->initialize($config); 
$this->image_lib->crop();

Now the size of the image is becoming 163x250. I can't figure out what is wrong with my code.

raidenace · Accepted Answer · 2013-05-02T18:30:25.497

I am not sure what your image_lib does but I think you are not accounting for aspect ratio becoming lesser than the required sizes when getting resized.

Suppose there is an image say: 1000 x 300

When you resize it becomes 500 x 150 (because you are maintaining aspect ratio)

When you crop it as 500 x 250, you are going to end up with either different size, or skewed up images.

What you need to do is, dynamically decide which side (height or width) has lesser value and then resize to that side maintaining aspect ratio and then crop it. This way, the image will always have enough content to be cropped at the mentioned sizes.

score 0 · Answer 2 · answered May 03 '13 at 13:23

The image library has given me a lot of headaches -- not because it's bad, but because I have to relearn how it works every time I try to do something new with it. For me at least, the documentation is a little hard to understand.

In the beginning, I also thought that it made more sense to resize before cropping. I don't remember exactly why, but I later found it was better to do the opposite. I may be mistaken on that, but my code works fine now, so I'm going to stick with that strategy.

Another thing that I think is important is setting the 'maintain_ratio' to FALSE and doing the calculations myself.

I recently rewrote my function for resizing, and I think it's mostly self-explanatory, except for my variable $top_crop. That's my "barber" variable, which tries to assume how much to take off the top. In my configuration file 'settings,' I have it set to 20. That means that out of the total amount to be cropped, take 20% off the top. In other words, if you're cropping 100px, take 20 from the top and 80 from the bottom.

Anyway, here's my code for cropping. You can use it and adapt it to your needs:

function resize_img($data){
    if ($data['width'] == 0 || $data['height'] == 0){
        return FALSE;
    }
    $this->config->load('settings');
    $ratio = $data['height']/$data['width'];
    $targ_ratio = $data['max_ht']/$data['max_wd'];
    $top_crop = $this->config->item('crop_top');
    if ($targ_ratio >= $ratio){
        //too wide
        $crop_width = floor($data['height'] / $targ_ratio);
        $crop_height = $data['height'];
    } else {
        //too tall
        $crop_width = $data['width'];
        $crop_height = floor($data['width'] * $targ_ratio);
    }
    $img_data = array(  'source_image'      =>  $data['full_path'],
                        'maintain_ratio'    =>  FALSE,
                        'x_axis'            =>  round(($data['width'] - $crop_width)/2),
                        'y_axis'            =>  round(($data['height'] - $crop_height)*$top_crop/100),
                        'width'             =>  $crop_width,
                        'height'            =>  $crop_height);
    //thumbs have a target path
    if ($data['target_path']){
            $img_data['new_image'] = $data['target_path'];
            //set source for the crop, because for thumbs it will be the thumb folder
            $source = $data['target_path'].$data['file_name'];
    } else {
            $source = $data['full_path'];
    }
    $this->image_lib->clear();
    $this->image_lib->initialize($img_data);
    if ($this->image_lib->crop()){
        $img_data = array(  'source_image'  =>  $source,
                            'maintain_ratio'    =>  FALSE,
                            'width'             =>  $data['max_wd'],
                            'height'        =>  $data['max_ht']);
        $this->image_lib->clear();
        $this->image_lib->initialize($img_data);
        if($this->image_lib->resize()){
            return array('height' => $data['max_ht'], 'width' => $data['max_wd']);
        }
    }
    return $this->image_lib->display_errors();
}

My CodeIgniter image manipulation library isn't working the way I want

2 Answers2