Crop images with Image Manipulation Class

[eluser]Kenny[/eluser]
Hello everyone,


I'm working at the moment on uploading profile pictures for a kind of mini-social network.

There's a feature for users allowing them to crop themselves their profile picture to create their square thumbnail thanks to jQuery-plugin imgAreaSelect http://odyniec.net/projects/imgareaselect/ (the same system as on the "Live Example" of the page)

The problem is that I don't know how to use the Image Manipulation Class' crop function... imgAreaSelect returns me X1, Y1, X2 and Y2 but I don't see where I can put these infos in the function.

I've read the doc : http://ellislab.com/codeigniter/user-gui...e_lib.html but the crop() explanation is not very clear and I still not understand how to use this. I don't even know what x_axis and y_axis are.


Can you tell me how it works ?

Thank you !
k

[eluser]waynhall[/eluser]
I recently was able to make some square thumbnails, but I found the ImageMagick class of PHP to work better than CodeIgniter in this instance.

Here is a function in my photos controller that I used to generate thumbnails for an entire directory. It doesn't involve any client-side customization; it just automatically generates the thumbnails, but maybe you can figure something out from the documentation at: http://php.net/manual/en/book.imagick.php

(Note that I'm saving pngs, not jpgs)
(You'll need imagemagick and php5-imagick (On Ubuntu: sudo apt-get install imagemagick php5-imagick)

Code:

private function _make_thumbs($dir) {
            // makes 75x75 .png thumbnail images in bulk for the root level of $dir
            // and places them inside a thumbs/ folder
            
            $img_dir = '/var/www/sleepin4/img/';
            $dir = $img_dir . $dir;
            
            // Add trailing slash if need be
            if(substr($dir, -1) != '/'){
                $dir = $dir . '/';
            }
            
            // Attempt to make a thumbs folder
            mkdir($dir . 'thumbs', 0755);
            
            $this->load->helper('directory');
            $map = directory_map($dir);
            
            foreach($map as $key => $value) {
                
                if(is_numeric($key) && !stripos($value, 'thumb')) {
                    
                    
                    $src = $dir . $value;
                    $target = $dir . 'thumbs/'. substr($value, 0, stripos($value, '.jpg')) . '.png';;


                    /* Read the image */
                    $im = new imagick( $src );
                    $im->cropThumbnailImage( 75, 75 );
                    $im->writeImage($target);
                    
                    $im->clear();
                    $im->destroy();

                }                
            }
        }

[eluser]Kenny[/eluser]
Hello,

Thank you for the answer. The problem is that the website is not hosted on our own servers but in a shared web hosting service... I guess I won't be able to use image magick ?

[eluser]waynhall[/eluser]
A lot of shared hosting servers have ImageMagick. I know HostGator does. You might want to consult with your hosting tech support.

Meanwhile I would recommend running a development server with Ubuntu, or one of the other Linux distros.

[eluser]Kenny[/eluser]
Good news, I finally made the crop() function work !! Actually I misunderstood the doc about this function. I had to put the x_axis and y_axis of the top left corner of the selection and put its width and height in... width and height.

Here's my code :

Code:

<?php
$this->load->library('image_lib');
        // crop
        $this->image_lib->clear();
        
        $config['image_library'] = 'gd2';
        $config['source_image'] = './user/'.$this->input->post('nomfichier');
        $config['new_image'] = './user/mini_'.$this->input->post('nomfichier');
        $config['x_axis'] = $this->input->post('x1');
        $config['y_axis'] = $this->input->post('y1');
        $config['width'] = $this->input->post('w');
        $config['height'] = $this->input->post('w'); // actually $this->input->post('h'), but we don't care cuz it is a square thumbnail
        $config['maintain_ratio'] = FALSE;

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

        $this->image_lib->crop();
        
        $this->image_lib->clear();
        // resize
        $config['image_library'] = 'gd2';
        $config['source_image'] = './user/mini_'.$this->input->post('nomfichier');
        $config['width'] = 55;
        $config['height'] = 55;
        $config['maintain_ratio'] = FALSE;

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

[eluser]waynhall[/eluser]
Glad you could make it work! I know I had trouble with cropping. Good to know once I get started on an HTML5 Image uploader to help my client manage photos!

[eluser]thisizmonster[/eluser]
Yes. It was what I looking for. Thanks, I'll try.