Resizing an uploaded image

[eluser]Stompfrog[/eluser]
Hi,

I am trying to allow website users to upload an avatar to their profiles. I have managed to create a working file upload form thanks to the CI documentation and forum examples. The function that i have in my controller is like this...

Code:

function avatar(){

    $config['upload_path'] = './avatars/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size']    = '0';
    $config['max_width']  = '1024';
    $config['max_height']  = '768';
    $config['encrypt_name'] = TRUE;
    $config['remove_spaces'] = TRUE;
    
    $this->load->library('upload', $config);

    if ( ! $this->upload->do_upload()){
        $error = array('error' => $this->upload->display_errors());
        $this->load->view('static/header', $data);
        $this->load->view('avatar_view', $error);
        $this->load->view('static/footer');
    }    
    else{
        $data = array('upload_data' => $this->upload->data());
        $upload_data = $this->upload->data();
            $userAvatar = "/avatars/".$upload_data['file_name'];
        avatar2($userAvatar);
    }        
}

This is working fine but the avatars need to be a 60px x 60px square before they can be used on my site. This is where avatar2() comes in...

Code:

function avatar2($userAvatar){

    $this->load->library('image_lib');

    $config['image_library'] = 'GD2';
    $config['source_image'] = $userAvatar;
    $config['x_axis'] = '60';
    $config['y_axis'] = '60';
    $config['new_image'] = "thisisatest.jpg";
    
    $this->image_lib->initialize($config);
    
    if ( ! $this->image_lib->crop())
    {
        echo $this->image_lib->display_errors();
    }
    
    echo "this is the end";

}

I am not getting any errors and the echo and the end of the function is appearing fine.

The original uploaded file is appearing in the /avatars folder but there is no resized thumbnail.

I am using MAMP on Mac OSX. Can anyone help me to work out where I am going wrong?

Thanks

[eluser]Sein Kraft[/eluser]

Code:

$config[] = 'GD2';
$config['source_image'] = $userAvatar;
$config['new_image'] = 'thisisatest.jpg';
$config['maintain_ratio'] = TRUE;
$config['height'] = 60;
$config['width'] = 60;
$config['quality'] = 100;
    
$this->load->library('image_lib', $config);
$this->image_lib->resize();

[eluser]Stompfrog[/eluser]
Thanks very much for the code.

This is working well but is not quite what I was hoping to achieve.

With this solution if you have an initial image 600 x 300 and run your function it will produce an avatar of 60 x 30.

What modifications would I need to make so that the function generates a 60 x 60 undistorted square from the centre of the initial image.

I guess this would be a two stage process...

1) Make a centred 300 x 300 crop from the 600 x 300 image.
2) Resize the 300 x 300 to be 60 x 60.

How would that work using CI?

[eluser]Sarfaraz Momin[/eluser]
You want something called cropping. Well there is a crop option available in the image library but it is advisable to use some javascript library to allow selection of the area which needs to be cropped so to maintain integrity of the image as well as make it undistorted. Well you can google for javascript crop selection script and use it along with the crop option of the image library.

Hope it makes sense !!!

Have a good day !!!

[eluser]Stompfrog[/eluser]
I have almost achieved what I wanted.

I have 3 functions.

avatar() Uploads an image and saves it into the avatar folder.
avatar2() does some maths and then crops the central square of the rectangular image.
avatar3() then resizes the central square to be 60px x 60px

The code is as follows...

Code:

function avatar(){
    
        $data['title'] = "My avatar Title";
    
        $config['upload_path'] = './avatars/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']    = '0';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';
        $config['encrypt_name'] = TRUE;
        $config['remove_spaces'] = TRUE;
        
        $this->load->library('upload', $config);
    
        if ( ! $this->upload->do_upload()){
            $error = array('error' => $this->upload->display_errors());
            $this->load->view('static/header', $data);
            $this->load->view('avatar_view', $error);
            $this->load->view('static/footer');
        }    
        else{
            $data = array('upload_data' => $this->upload->data());
            $upload_data = $this->upload->data();
            $this->avatar2($upload_data);
        }        

    }
    
    function avatar2($upload_data){
    
        $width = $upload_data['image_width'] ;
        $height = $upload_data['image_height'] ;
    
        $config[] = 'GD2';
        $config['source_image'] = "./avatars/".$upload_data['file_name'];
        $config['maintain_ratio'] = FALSE;
        $config['quality'] = 100;
    
    
        if($height>$width){
            $config['x_axis'] = 0;
            $config['y_axis'] = ($height-$width)/2;
            $config['height'] = $width;
            $config['width'] = $width;
        }else{
            $config['y_axis'] = 0;
            $config['x_axis'] = ($width-$height)/2;
            $config['height'] = $height;
            $config['width'] = $height;
        }
        
        $this->load->library('image_lib', $config);
        $this->image_lib->crop();
        $this->avatar3($upload_data);

    }
    
    function avatar3($upload_data){
    
        $config[] = 'GD2';
        $config['source_image'] = "./avatars/".$upload_data['file_name'];
        $config['new_image'] = 'thisisatest.jpg';
        $config['maintain_ratio'] = TRUE;
        $config['height'] = 60;
        $config['width'] = 60;
        $config['quality'] = 100;
            
        $this->load->library('image_lib', $config);
        $this->image_lib->resize();
        
    }

If i submit the upload form with this code i end up with a single 300px x 300px image in the avatar folders, this is great, it means avatar() and avatar2() are doing there job. avatar3() appears to be failing tho as the image is not 60px x 60px.

It I tweak avatar() to make a call to avatar3() instead of avatar2() I get the expected 60px x 30px "thisisatest.jpg".


To summarise:

avatar() --> avatar2() works
avatar() --> avatar3() works
avatar() --> avatar2() --> avatar3() doesn't work

In this third scenario there are no errors it just doesn't do the last step of the image processing.

Any ideas?

[eluser]dmiden[/eluser]

Code:

function avatar3($upload_data){
    
        $config[] = 'GD2';
        $config['source_image'] = "./avatars/".$upload_data['file_name'];
        $config['new_image'] = 'thisisatest.jpg';
        $config['maintain_ratio'] = TRUE;
        $config['height'] = 60;
        $config['width'] = 60;
        $config['quality'] = 100;
            
        $this->load->library('image_lib', $config);
        $this->image_lib->resize();
        
}

Change $config[] = 'GD2';
To $config['image_library'] = 'gd2';

Also try changing $config['maintain_ratio'] to false.

[eluser]doccer[/eluser]
I liked the logic behind these functions, but decided to put them all in one function.
The problem with the previous code tho is that the config data for the resize method needs to be re initialized.

The following works perfect. It takes a non-square image, squares it, and crops it with out distortion.

$config['upload_path'] = './avatars/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '0';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$config['encrypt_name'] = TRUE;
$config['remove_spaces'] = TRUE;

$this->load->library('upload', $config);

if ( ! $this->upload->do_upload())
{
$error = array('error' => $this->upload->display_errors());

$this->load->view('includes/header', $this->data);
$this->load->view('includes/menu_bar');
$this->load->view('image_upload_view', $error);
$this->load->view('user_view_sidebar');
$this->load->view('includes/footer', $this->footer);
}
else
{
$data = array('upload_data' => $this->upload->data());
$upload_data = $this->upload->data();
$width = $upload_data['image_width'] ;
$height = $upload_data['image_height'] ;

$config['image_library'] = 'gd2';
$config['source_image'] = "./avatars/".$upload_data['file_name'];
$config['maintain_ratio'] = FALSE;
$config['quality'] = 100;


if($height>$width){
$config['x_axis'] = 0;
$config['y_axis'] = ($height-$width)/2;
$config['height'] = $width;
$config['width'] = $width;
}else{
$config['y_axis'] = 0;
$config['x_axis'] = ($width-$height)/2;
$config['height'] = $height;
$config['width'] = $height;
}

$this->load->library('image_lib', $config);
$this->image_lib->crop();

$config['maintain_ratio'] = FALSE;
$config['height'] = 60;
$config['width'] = 60;

$this->image_lib->initialize($config);
$this->image_lib->resize();

//Show success page
$this->session->set_flashdata('message','You successfully uploaded your avatar.');
redirect('profile/edit/avatar');