Thread

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-guide/libraries/image_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

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)

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();

                }                
            }
        }

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 ?

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.

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 :

<?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();
?>

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!

I’ve been trying to get this done for couple of hours today. All went well when I decided not to follow the user guide, but check the Image_lib myself. Looks like user guide is either outdated or has some serious mistakes when it comes to image manipulation.

If you think about cropping with imagemagick:
- x_axis and y_axis are top left corner of what you’ll be left with
- width and height are the dimensions of the cropped area
- create_thumb is also used when cropping

this is a part of the code in Image_lib.php

$cmd .= " -crop ".$this->width."x".$this->height."+".$this->x_axis."+".$this->y_axis." ...

this produces (ex. when you want 50x50 crop from top-left corner of image):

-crop 50x50+0+0

More info here: http://www.imagemagick.org/script/command-line-processing.php#geometry . Check the {size}{offset} in second table.

Yes. It was what I looking for. Thanks, I’ll try.